1

すべてのボックスを選択することに成功しましたが、別の質問があります。

どうすればそれも選択解除できますか？

ここに私の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

4 に答える 4

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;
}
于 2013-08-21T04:40:53.607 に答える
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>
于 2013-08-21T04:45:08.253 に答える
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>
于 2013-08-21T04:48:44.140 に答える