码迷,mamicode.com
首页 > Web开发 > 详细

js全选反选按钮实现

时间:2019-01-14 23:10:58      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:puts   type   我不知道   oct   NPU   做什么   你知道   tle   form   

<!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>

 

js全选反选按钮实现

标签:puts   type   我不知道   oct   NPU   做什么   你知道   tle   form   

原文地址:https://www.cnblogs.com/myjayce/p/10269353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!