一、知识要点
综合使用Dom操作
二、源码参考
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #999;
}
</style>
<script>
window.onload = function() {
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var div1 = document.getElementById('div1');
var cbox = div1.getElementsByTagName('input');
btn1.onclick = function() {
for(var i = 0; i < cbox.length; i++) {
cbox[i].checked = true;
}
}
btn2.onclick = function() {
for(var i = 0; i < cbox.length; i++) {
cbox[i].checked = false;
}
}
btn3.onclick = function() {
for(var i = 0; i < cbox.length; i++) {
if(cbox[i].checked == false) {
cbox[i].checked = true;
} else {
cbox[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="全选" />
<input type="button" name="btn2" id="btn2" value="不选" />
<input type="button" name="btn3" id="btn3" value="反选" />
<div id="div1">
<input type="checkbox" name="" id="" value="" /><br>
<input type="checkbox" name="" id="" value="" /><br>
<input type="checkbox" name="" id="" value="" /><br>
<input type="checkbox" name="" id="" value="" /><br>
<input type="checkbox" name="" id="" value="" /><br>
</div>
</body>
</html>
三、运行效果
QQ20190328-171231.gif
网友评论