我们经常会在网站上遇到一些多选的情况，下面我就来说说使用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>