js全选反选按钮实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<form action="">
<p><input type="checkbox" >我是谁</p>
<p><input type="checkbox" >我在哪</p>
<p><input type="checkbox" >我在做什么呢</p>
<p><input type="checkbox" >你知道</p>
<p><input type="checkbox" >我不知道</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
</p>
<script>
var all =document.getElementById('all');
var notall=document.getElementById('notall');
var unall=document.getElementById('unall');
var inputs =document.getElementsByTagName('input');
all.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked=true;
}
}
notall.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked=false;
}
}
unall.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = !inputs[i].checked;
}
}
</script>

</body>
</html>

猜你喜欢

转载自www.cnblogs.com/myjayce/p/10269353.html