前段时间项目中用到该功能,我便整理了一下,分享给js刚入门的朋友。热烈欢迎大家指点和建议,谢谢!
前端HTML代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div id="divCheckBoxList"> <input id="checkbox1" type="checkbox" /> <label for="checkbox1">Red</label> <input id="checkbox2" type="checkbox" /> <label for="checkbox2">Gold</label> <input id="checkbox3" type="checkbox" /> <label for="checkbox3">Green</label> <input id="checkbox4" type="checkbox" /> <label for="checkbox4">Block</label> <input id="checkbox5" type="checkbox" /> <label for="checkbox5">Yellow</label> </div> <input type="checkbox" id="selectAll" /> <label for="selectAll">Select All</label> <input type="checkbox" id="chReverse" /> <label for="selectAll">Reverse</label> </form> </body> </html>
HTML中有五个颜色的choeckbox,一个Select All的checkbox和一个Reverse的checkbox
一下是JS代码:
<script type="text/ecmascript"> window.onload = function () { var checkboxList = document.getElementById("divCheckBoxList").getElementsByTagName("input"); var chSelectAll = document.getElementById("selectAll"); var chReverse = document.getElementById("chReverse"); var intCheckboxSelectAll = 0;//记录选中的checkbox的个数 //Select All chSelectAll.onclick = function () { intCheckboxSelectAll = 0; for (var i = 0; i < checkboxList.length; i++) { if (chSelectAll.checked == true) { checkboxList[i].checked = true; intCheckboxSelectAll++; } else { checkboxList[i].checked = false; intCheckboxSelectAll = 0; } } } for (var i = 0; i < checkboxList.length; i++) { checkboxList[i].onclick = function () { if (this.checked == false) { chSelectAll.checked = false; intCheckboxSelectAll--; } else { intCheckboxSelectAll++; if (intCheckboxSelectAll == checkboxList.length) { chSelectAll.checked = true; } } } } //Reverse chReverse.onclick = function () { intCheckboxSelectAll = 0; for (var i = 0; i < checkboxList.length; i++) { checkboxList[i].checked = !checkboxList[i].checked; if (checkboxList[i].checked == true) { intCheckboxSelectAll++; } else { intCheckboxSelectAll = 0; } } if (intCheckboxSelectAll == checkboxList.length) { chSelectAll.checked = true; } else { chSelectAll.checked = false; } } } </script>
为了实现逐个点击并选中颜色的chockbox时Select All也需要自动的被选中的功能,我定义个一个记录选中checkbox个数的变量intCheckboxSelectAll 。在特定的情况下判断intCheckboxSelectAll的值就能实现相应的功能。