label, checkbox （携程

Question

携程的页面

做到携程的这个条件勾选， 一开始想仿照它的来实现，

我从中贴一个结构出来：

    <label data-dopost="T" data-type="star" data-value="3" id="star-3" class=" " title="三星级/舒适">
        <input value="" type="checkbox">
        <span class="txt">三星级/舒适</span>
    </label>

它的效果是， 点击 多选框文字(label) 就加背景色、勾选或反之。

---

看着不难啊， 我想着轻松徒手撸一个（其实是我找不到它的js...

第一次

我没改结构（虽然感觉 input 放 label 里面好像有点奇怪
做的监听点击 addEventlisner
点击文字时， 发现会执行两次回调（ class 增、删各一次， checkbox 倒还是选中状态

点击checkbox(复选框）时， 只触发一次

这一下子就想到了 label 的特性了啊， 于是就禁用了它的默认操作 event.preventDefault()， 现在只进行了一次回调了（控制台只打印一次）。
然后问题来了 ：

• 复选框需要手动赋值 .checked = false/true （我这一步就死了... 不论怎么点，它的状态都不会变.. 题外话： checkbox 没有 name 属性值的话， 想要默认选中是不行的）

我试过很多种姿势， 不过有点忘记了... 头疼

总结一下就是：
求解啊！ 携程它是怎么做到的？？？
（就它那个 html 结构, label input checkbox 放一块这样的。
点击 多选框、文字 后， 框状态改变、背景改变）

    <label id="label-t2" for="t2">
      t2
      <input id="t2" type="checkbox" name="t2" >
    </label>
    
    // 也可以换个结构(我也试过了， 不过忘了啥毛病， 思路是监听 div 点击， 然后加背景加勾选。应该也是点 checkbox 和 文字 时候表现不一样)，结构比如：
    <div id="..">
        <label for="..">
        <input type="checkbox">
    </div>

    // 换背景
      function toggleBg(ele) {
        console.log('ele', ele)
        if (ele.classList.contains('bg-gray')) {
          ele.classList.remove('bg-gray');
        }else {
          ele.classList.add('bg-gray');
        }
      }

       // 切换 checked
      function toggleCheckbox(ele){
        // var checked = ele.getElementsByTagName('input').checked;
        var checked = document.getElementById('t2').checked;
        console.log(checked)
        if (checked) {
          checked = false;
        }else {
          checked = true;
        }
      }

      // 监听 label ， 因为都包在 label 内的
      var labelT2 = document.getElementById('label-t2');
      labelT2.addEventListener('click', function (e) {
        e.preventDefault();
        console.log('label-t2');
        toggleBg(labelT2)
        toggleCheckbox(labelT2);
      })

Answer 1

    var label = document.getElementById("label-t2");
    label.onmouseup = function(){
      if(label.className ===""){
        this.className  = "bg-gray";
      }else{
        this.className = "";
      }
    }

Answer 2

这种和js没任何关系的，应该是css直接控制的，你可以看看css的伪类选择器

Answer 3

这个直接用css写不就行了，不过要兼容ie的话还是得用js，可以用css伪元素配合:checked写，有兴趣看看我的博客链接描述