JavaScript---复选框反选全选
Script
<script type="text/javascript"> /*直接使用document.getElementsByName("c1")获取元素,则获取所有name=c1的元素,放在函数调用之前便可以了*/ var allpro = tableAll.getElementsByName("c1"); //全选方法 function change() { /*注意:这里获取指定节点与获取指定节点中checkbox按钮组只能放在body内容加载完成之后才执行的位置;直接使用document.getElementsByName("c1")获取元素*/ //获取指定节点 var tableAll = document.getElementById("tableName"); //获取指定节点中checkbox按钮组 var allpro = tableAll.getElementsByTagName("input"); //获取全选按钮 var all = document.getElementById("all"); //全选按钮被选中时,遍历所有按钮 if (all.checked) { for (var i = 0; i < allpro.length; i++) { if (allpro[i].type=="checkbox") { allpro[i].checked=true; } } }else{//全选按钮未被选中时 for (var i = 0; i < allpro.length; i++) { if (allpro[i].type=="checkbox") { allpro[i].checked=false; } } } }
//反选 function revs() { var tableAll = document.getElementById("tableName"); //获取checkbox按钮组 var allpro = tableAll.getElementsByTagName("input"); //遍历所有按钮 for (var i = 0; i < allpro.length; i++) { if (allpro[i].type=="checkbox") { allpro[i].checked= !allpro[i].checked; } } } </script>
html
<input type="checkbox" name="c0" id="all" value="全选" onclick="change()"> 全选 <input type="checkbox" name="r0" id="revcheck" value="反选" onclick="revs()"> 反选 <hr> <table id="tableName"> <tr> <td><input type="checkbox" name="c1">篮球</td> </tr> <tr> <td><input type="checkbox" name="c1">足球</td> </tr> <tr> <td><input type="checkbox" name="c1">羽毛球</td> </tr> <tr> <td><input type="checkbox" name="c1">兵乓球</td> </tr> </table> <hr> <table> <tr> <td><input type="checkbox" name="c1">篮球</td> </tr> <tr> <td><input type="checkbox" name="c1">足球</td> </tr> <tr> <td><input type="checkbox" name="c1">羽毛球</td> </tr> <tr> <td><input type="checkbox" name="c1">兵乓球</td> </tr> </table>