我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路。
全选思路:
首先,我们来分析一下知道,当我们点击”全选”复选框的时候,所有的复选框应该都被选中,那我们就可以给”全选”复选框注册一个事件,就是如果全选按钮被选中的话,那么其他所有复选框都被选中;然后就是其他复选框部分选中或全不选中,那么”全选”复选框不选中。
反选思路:
我们知道,当我们点击反选按钮,那么就把除”全选”之外的所有复选框的选中状态取反(之前选中的为不选中,之前不选中的为选中),在根据这些复选框的选中状态来判断”全选”是否选中。
<html>
<head>
<title></title>
<script type="text/javascript">
function f1(){
var gender=document.getElementsByName("sex");
for(var i=;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=;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=;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=;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=;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=;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>