全选反选

最新推荐文章于 2024-10-21 16:11:59 发布

夜之光华

最新推荐文章于 2024-10-21 16:11:59 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/qq_33279632/article/details/52915162

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="全选" />
<input type="button" name="btn2" id="btn2" value="反选" />
<div id="box">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
var inputs = box.getElementsByTagName('input');
//全选
btn1.onclick = function(){
for(var i = 0; i < inputs.length; i ++){
inputs[i].checked = true;
}
}
//反选
btn2.onclick = function(){
for(var i = 0; i < inputs.length; i ++){
if(inputs[i].checked == true){
inputs[i].checked = false;
}else{
inputs[i].checked = true;
}
}
}
</script>
</html>