label, checkbox （攜程

攜程的頁(yè)面

做到攜程的這個(gè)條件勾選， 一開(kāi)始想仿照它的來(lái)實(shí)現(xiàn)，

我從中貼一個(gè)結(jié)構(gòu)出來(lái)：

    <label data-dopost="T" data-type="star" data-value="3" id="star-3" class=" " title="三星級(jí)/舒適">
        <input value="" type="checkbox">
        <span class="txt">三星級(jí)/舒適</span>
    </label>

它的效果是， 點(diǎn)擊 多選框文字(label) 就加背景色、勾選或反之。

看著不難啊， 我想著輕松徒手?jǐn)]一個(gè)（其實(shí)是我找不到它的js...

第一次

我沒(méi)改結(jié)構(gòu)（雖然感覺(jué) input 放 label 里面好像有點(diǎn)奇怪
做的監(jiān)聽(tīng)點(diǎn)擊 addEventlisner
點(diǎn)擊文字時(shí)， 發(fā)現(xiàn)會(huì)執(zhí)行兩次回調(diào)（ class 增、刪各一次， checkbox 倒還是選中狀態(tài)

點(diǎn)擊checkbox(復(fù)選框）時(shí)， 只觸發(fā)一次

這一下子就想到了 label 的特性了啊， 于是就禁用了它的默認(rèn)操作 event.preventDefault()， 現(xiàn)在只進(jìn)行了一次回調(diào)了（控制臺(tái)只打印一次）。
然后問(wèn)題來(lái)了 ：

• 復(fù)選框需要手動(dòng)賦值 .checked = false/true （我這一步就死了... 不論怎么點(diǎn)，它的狀態(tài)都不會(huì)變.. 題外話： checkbox 沒(méi)有 name 屬性值的話， 想要默認(rèn)選中是不行的）

我試過(guò)很多種姿勢(shì)， 不過(guò)有點(diǎn)忘記了... 頭疼

總結(jié)一下就是：
求解?。?攜程它是怎么做到的？？？
（就它那個(gè) html 結(jié)構(gòu), label input checkbox 放一塊這樣的。
點(diǎn)擊 多選框、文字 后， 框狀態(tài)改變、背景改變）

    <label id="label-t2" for="t2">
      t2
      <input id="t2" type="checkbox" name="t2" >
    </label>
    
    // 也可以換個(gè)結(jié)構(gòu)(我也試過(guò)了， 不過(guò)忘了啥毛病， 思路是監(jiān)聽(tīng) div 點(diǎn)擊， 然后加背景加勾選。應(yīng)該也是點(diǎn) checkbox 和 文字 時(shí)候表現(xiàn)不一樣)，結(jié)構(gòu)比如：
    <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;
        }
      }

      // 監(jiān)聽(tīng) label ， 因?yàn)槎及?label 內(nèi)的
      var labelT2 = document.getElementById('label-t2');
      labelT2.addEventListener('click', function (e) {
        e.preventDefault();
        console.log('label-t2');
        toggleBg(labelT2)
        toggleCheckbox(labelT2);
      })