<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<button type="button">全选</button>
<button type="button">反选</button>
<button type="button">不选</button>
<br/>
<input type="checkbox">蓝球
<input type="checkbox">乒乓球
<input type="checkbox">足球
<input type="checkbox">羽毛球
<input type="checkbox">棒球
<input type="checkbox">排球
</div>
<script type="text/javascript">
var btn=document.querySelectorAll('button');
var inputs=document.querySelectorAll('input');
//全选,循环给input添加属性
btn[0].onclick=function(){
for(var i=0;i<=inputs.length;i++){
inputs[i].checked=true;
}
}
//不选,循环给input添加属性
btn[2].onclick=function(){
for(var i=0;i<=inputs.length;i++){
inputs[i].checked=false;
}
}
//反选
btn[1].onclick=function(){
for(var i=0;i<=inputs.length;i++){
//如果input选中则执行语句将checked改为false,反之为true
if(inputs[i].checked){
inputs[i].checked=false;
}else{
inputs[i].checked=true;
}
}
}
</script>
</body>
</html>
js案例——全选、反选、不选
最新推荐文章于 2024-01-03 10:10:47 发布