<html> <head> <title>JS实现全选、全不选、反选表单复选框</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } /** * 选择复选框 * @param type 1 全选;0 全不选 */ function checkAll(type) { type = Number(type); var inputs = document.getElementsByTagName("input"); for(var i = 0; i < inputs.length; i++) { if(inputs[i].type == "checkbox") { inputs[i].checked = type; } } setCheckType(type); } /** * 设置按钮文字和选择标识 * @param type 1 全选;0 全不选 */ function setCheckType(type) { var btnSelect = $("btnSelect"); if(type) { btnSelect.value = "全不选"; } else { btnSelect.value = "全选"; } fm.hidnSelectFlag.value = Number(!type); } /** * 反选 */ function checkOpposite() { var inputs = document.getElementsByTagName("input"); var checkboxLength = 0; // 所有复选框的数量 var selectedCount = 0; // 所有被选中的复选框数量 var checkType = false; for(var i = 0; i < inputs.length; i++) { if(inputs[i].type == "checkbox") { inputs[i].checked = !inputs[i].checked; checkType = inputs[i].checked; checkboxLength++; if(checkType) { selectedCount++; } } } if((checkboxLength == selectedCount) || (!selectedCount)) { setCheckType(checkType); } } </script> </head> <body> <form name="fm" action="#" method="post"> <input type="checkbox" name="" value=""/><br/> <input type="checkbox" name="" value=""/><br/> <input type="checkbox" name="" value=""/><br/> <input type="checkbox" name="" value=""/><br/> <input type="checkbox" name="" value=""/><br/> <input type="button" id="btnSelect" value="全选" onclick="checkAll(fm.hidnSelectFlag.value)"/> <input type="hidden" name="hidnSelectFlag" value="1"/> <input type="button" value="反选" onclick="checkOpposite()"/> </form> </body> </html>
转载请注明: haoshu发表于浩叔逛逛>>https://www.haoshu888.com/js/944.html