您的位置：首页 > Web前端 > JavaScript

javascript 经典案例全选不选反选

2016-06-15 00:00 525 查看

<title>规范：全选 不选  反选</title>
<script>
window.onload=function (){

var oBtn1=document.getElementById("Btn1");
var oBtn2=document.getElementById("Btn2");
var oBtn3=document.getElementById("Btn3");
var oDiv=document.getElementById("Ben");
var oInp=oDiv.getElementsByTagName("input");

oBtn1.onclick=function(){     //全选
//oInp[0].checked=true;   // checked ： 布尔值  false  true;
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=true;
}
};
oBtn2.onclick=function(){    //不选
for(var i=0; i<oInp.length ; i++){
oInp[i].checked=false;
}
};
oBtn3.onclick=function(){    //反选
for(var i=0; i<oInp.length ; i++){
if(oInp[i].checked==true){

oInp[i].checked=false;
}
else{
oInp[i].checked=true;
}
}
};
};

</script>
</head>
<body>

<input id="Btn1" type="button" value="全选" /><br />
<input id="Btn2" type="button" value="不选" /><br />
<input id="Btn3" type="button" value="反选" /><br />
<div id="Ben">
<input type="checkbox"  /><br />
<input type="checkbox" /><br />  <!--复选框   checked  选中-->
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

javascript 经典案例 全选 不选 反选

javascript 经典案例全选不选反选