Как выбрать all или unselect все элементы

Question

Я успешно выбрал все поле, но у меня есть другой вопрос.

Как сделать так, чтобы он не был выбран?

Вот мой Javascript код:

var tab1 = document.getElementById("tbl1"); 
var tab2 = document.getElementById("tbl2"); 
var tab3 = document.getElementById("tbl3"); 
var tab4 = document.getElementById("tbl4"); 
var tab5 = document.getElementById("tbl5"); 
var tab6 = document.getElementById("tbl6"); 
var tab7 = document.getElementById("tbl7"); 
var tab8 = document.getElementById("tbl8"); 
var tab9 = document.getElementById("tbl9"); 
var elems = document.getElementById("checkall"); 


if (elems.checked == true) { 

    tab1.checked = true; 
    tab2.checked = true; 
    tab3.checked = true; 
    tab4.checked = true; 
    tab5.checked = true; 
    tab6.checked = true; 
    tab7.checked = true; 
    tab8.checked = true; 
    tab9.checked = true; 
} 

Есть ли способ сделать это?

Answer 1

Дайте общее название класса для вашего ребенка флажков, например child-selector:

var checked = document.getElementById("checkall").checked; 
var childElems = document.getElementsByClassName('child-selector'); 

for(var i=0; i< childElems.length; i++){ 
    childElems[i].checked = checked; 
} 

Answer 2

<input type="checkbox" id="tbl1" /><br /> 
<input type="checkbox" id="tbl2" /><br /> 
<input type="checkbox" id="tbl3" /><br /> 
<input type="checkbox" id="tbl4" /><br /> 
<input type="checkbox" id="tbl5" /><br /> 
<input type="checkbox" id="tbl6" /><br /> 
<input type="checkbox" id="tbl7" /><br /> 
<input type="checkbox" id="tbl8" /><br /> 
<input type="checkbox" id="tbl9" /><br /> 
<input type="checkbox" id="checkall" onclick="selectDeselect();" /> 


<script> 
     function selectDeselect(){ 
      var elems = document.getElementById("checkall"); 
      for(var i = 1;i<=9;i++){ 
       tab = document.getElementById("tbl" + i); 
       tab.checked = elems.checked; 
      } 

     } 
</script> 

Answer 3

Использование JQuery, чтобы сделать это как более простой

<input type="checkbox" id="check_all" onclick='check_uncheck();'/> 
    <input type="checkbox" name="tab[]" id="tbl1" /> 
    <input type="checkbox" name="tab[]" id="tbl2" /> 
    <script> 
    function check_uncheck() { 
     jQuery("[name='tab[]']").prop('checked', $('#check_all').prop('checked')); 
    } 
    </script> 

Answer 4

var checkAll = elems.checked; 
tab1.checked = checkAll; 
tab2.checked = checkAll; 
tab3.checked = checkAll; 
tab4.checked = checkAll; 
tab5.checked = checkAll; 
tab6.checked = checkAll; 
tab7.checked = checkAll; 
tab8.checked = checkAll; 
tab9.checked = checkAll; 

Или вы может дать имя этим флажкам, document.getElementsByName будет retu rn набор элементов, которые содержат tab1-tab9. Затем вы можете использовать цикл for для назначения свойства.
Надеюсь, это полезно.