Нажатием на один инпут выделялись все

304

06 сентября 2017, 12:29

Задача такая, что при нажатии на один чекбокс, нужно чтобы выделялись все. Я понимаю как реализовать это когда они идут один за другим, но мне нужно чтобы не было зависимостей. Если вы посмотрите код, то сами все увидите.

var main = document.querySelector('#shest tr th legend [type="checkbox"]'), 
    all = document.querySelectorAll('#shest tr th > [type="checkbox"]'); 
 
for(var i=0; i<all.length; i++) {  // 1 и 2 пункт задачи 
    all[i].onclick = function() { 
        var allChecked = document.querySelectorAll('#shest tr th > [type="checkbox"]:checked').length; 
        main.checked = allChecked == all.length; 
        main.indeterminate = allChecked > 0 && allChecked < all.length; 
    } 
} 
 
main.onclick = function() {  // 3 
    for(var i=0; i<all.length; i++) { 
        all[i].checked = this.checked; 
    } 
}

                            <div class="buyer__form"> 
                                <table border="1"> 
                                      <fieldset id="shest"> 
                                       <tr align="left"> 
                                          <th> 
                                              <legend> 
                                                  <input type="checkbox" id="all__order"> 
                                                  <label class="order__label" for="all__order"></label> 
                                              </legend> 
                                          </th> 
                                          <th>Заказ</th> 
                                          <th>Дата заказа</th> 
                                          <th>К оплате</th> 
                                          <th>Статус заказа</th> 
                                       </tr> 
                                       <tr align="left"> 
                                          <td> 
                                              <input type="checkbox" id="order__2"> 
                                              <label class="order__label" for="order__2"></label> 
                                          </td> 
                                          <td>350 руб.</td> 
                                          <td>от 7 дней</td> 
                                       </tr> 
                                       </fieldset> 
                                </table> 
                            </div>

Это попытка реализации, но хотелось бы чтобы зависимостей не было. Пожалуйста подскажите как можно реализовать подобное.

Answer 1

Убрал все привязки, правда в том числе и к вёрстке на всякий случай, но думаю, что вы умеете пользоваться селекторами и скорректируете под свои нужды

document.addEventListener("DOMContentLoaded", function(){ 
var main = document.querySelector('th input[type="checkbox"]'), 
    all = document.querySelectorAll('td input[type="checkbox"]'); 
 
for(var i=0; i<all.length; i++) {  // 1 и 2 пункт задачи 
    all[i].onclick = function() { 
        var allChecked = document.querySelectorAll('td  [type="checkbox"]:checked').length; 
        main.checked = allChecked == all.length; 
        main.indeterminate = allChecked > 0 && allChecked < all.length; 
    } 
} 
 
 
main.addEventListener("click", function() {  // 3 
    for(var i=0; i<all.length; i++) { 
        all[i].checked = this.checked; 
    } 
}); 
});