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

来源：互联网发布：益盟大单比率指标源码编辑：程序博客网时间：2024/05/21 08:41

1.选中全选复选框，则其他的复选框自动全部选中；

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

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

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

效果截图如下：

<body><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="checkbox" value="Car" onclick="isSelectAll()">I am manman <br><input type="checkbox" name="" value="all" id="all" onclick="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>

阅读全文

0 0