如何选择全部并取消选择所有元素

时间:2013-08-21 04:34:04

标签: javascript

我成功选择了所有框,但我有另一个问题。

我如何取消选中?

这是我的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;
}

有没有办法做到这一点?

4 个答案:

答案 0 :(得分:4)

为您的孩子复选框提供一个通用的班级名称,例如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;
}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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循环来分配属性 希望它有用。