JavaScript学习笔记之js实现复选框checkbox的全选、反选示例

xiaoxiao2021-02-28  139

1.选中全选复选框,则其他的复选框自动全部选中;

2.已选中全选复选框,再次点击全选复选框,则其他复选框全部不选中;

3.当全部其他复选框都被选中时,全选复选框自动被选中;

4.当全部其他复选框没有被全部选中时,全选复选框不被选中。

效果截图如下:

<body> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="checkbox" value="Car" οnclick="isSelectAll()">I am manman <br> <input type="checkbox" name="" value="all" id="all" οnclick="selectAll()">全选 <br> </body> <script> function selectAll(){//全选复选框控制其他复选框 var checkBoxList = document.getElementsByName("checkbox"); var allSelect = document.getElementById("all"); if(allSelect.checked){ for(var i=0;i<checkBoxList.length;i++){ checkBoxList[i].checked="checked"; } }else{ for(var i=0;i<checkBoxList.length;i++){ checkBoxList[i].checked=""; } } } function isSelectAll(){//其他复选框控制全选复选框 var checkBoxList = document.getElementsByName("checkbox"); var allSelect = document.getElementById("all"); var allSelectFlag = true; for(var i=0;i<checkBoxList.length;i++){ if(!checkBoxList[i].checked){ allSelectFlag = false; } } if(allSelectFlag){ allSelect.checked="checked"; }else{ allSelect.checked=""; } } </script>

转载请注明原文地址: https://www.6miu.com/read-18941.html

最新回复(0)