全选反选
程序员文章站
2022-06-01 13:17:06
...
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
//获取name=interest的标签集合
var interests=document.getElementsByName("interest");
//全选函数
document.getElementById("chkAll").onclick=function(){
for(var i=0;i<interests.length;i++){
interests[i].checked=this.checked;
}
}
//反选函数
document.getElementById("btnReverse").onclick=function(){
for(var i=0;i<interests.length;i++){
interests[i].checked=!interests[i].checked;
}
//检查全选
checkAll();
}
//所有选中则全选前加对勾，有一项没选中，全选没对勾
function checkAll(){
var count=0;
for(var i=0;i<interests.length;i++){
if (interests[i].checked) {
count++;
}
}
if (count==interests.length) {
document.getElementById("chkAll").checked=true;
}else{
document.getElementById("chkAll").checked=false;
}
}
//单击每一个复选框时，检查全选框的状态
for(var i=0; i<interests.length; i++){
interests[i].onclick = checkAll;
}
}
</script>
</head>
<body>
<input type="checkbox" id="chkAll" />全选
<input type="button" id="btnReverse" value="反选" />
<br/><br/>
<input type="checkbox" name="interest" value="唱歌" />唱歌
<input type="checkbox" name="interest" value="跳舞" />跳舞
<input type="checkbox" name="interest" value="跑步" />跑步
<input type="checkbox" name="interest" value="游泳" />游泳
</body>
上一篇： 有对dede理解的吗
下一篇： laravel 全选反选