javascript - 如何选择或取消选择所有元素

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

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 将返回包含 tab1 到 tab9 的元素集合。然后，您可以使用 for 循环来分配属性。
希望它有帮助。

Answer 3

 <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 4

使用 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>