我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路。
全选思路:
首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我们就可以给"全选"复选框注册一个事件,就是如果全选按钮被选中的话,那么其他所有复选框都被选中;然后就是其他复选框部分选中或全不选中,那么"全选"复选框不选中。
反选思路:
我们知道,当我们点击反选按钮,那么就把除"全选"之外的所有复选框的选中状态取反(之前选中的为不选中,之前不选中的为选中),在根据这些复选框的选中状态来判断"全选"是否选中。
<html> <head> <title></title> <script type="text/javascript"> function f1(){ var gender=document.getElementsByName("sex"); for(var i=0;i<gender.length;i++){ if(gender[i].checked){ alert(gender[i].value); break; } } } function checkAll(){ var checkAll=document.getElementById("checkAll"); var checkboxs=document.getElementsByTagName("input"); for(var i=0;i<checkboxs.length;i++){ if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){ checkboxs[i].checked=checkAll.checked; } } } window.onload=function(){ var checkboxs=document.getElementsByTagName("input"); for(var i=0;i<checkboxs.length;i++){ if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){ //给子checkbox动态注册事件 checkboxs[i].onclick=function(){ //定义一个变量记录"全选"checkbox的选中状态,默认为选中 var isCheckAll=true; for(var j=0;j<checkboxs.length;j++){ //过滤出不是checkbox和全选的控件 if(checkboxs[j].type=="checkbox"&&checkboxs[j].id!="checkAll"){ //判断子checkbox控件是否选中 if(!checkboxs[j].checked){ //只要有一个checkbox控件没有选中,那么全选checkbox就不选中 isCheckAll=false; } } } document.getElementById("checkAll").checked=isCheckAll; } } } } function reCheck(){ var checkboxs=document.getElementsByTagName("input"); for(var i=0;i<checkboxs.length;i++){ if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){ checkboxs[i].checked=!checkboxs[i].checked; } } var isCheckAll=true; for(var i=0;i<checkboxs.length;i++){ if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){ if(!checkboxs[i].checked){ isCheckAll=false; } } } document.getElementById("checkAll").checked=isCheckAll; } </script> </head> <body> <input type="radio" value="nan" name="sex"/>男 <input type="radio" value="nv" name="sex"/>女<br/> <input type="button" value="性别" onclick="f1()"/><br/> <input id="checkAll" type="checkbox" onclick="checkAll()"/>全选<br/> <input id="check1" type="checkbox" value="chifan"/>吃饭<br/> <input id="check2" type="checkbox" value="shuijiao"/>睡觉<br/> <input id="check3" type="checkbox" value="dadoudou"/>打豆豆<br/> <input id="reCheck" type="button" value="反选" onclick="reCheck()"/><br/> </body> </html>