版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26841579/article/details/80846114
学习前端的时候记下小知识点。
如下】、
<script>
//静态页面加载完成后再加载。js
window.onload=function () {
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
var div1=document.getElementById('div1');
var che=div1.getElementsByTagName('input');
//全选
btn1.onclick=function () {
for(var i=0;i<che.length;i++){
che[i].checked=true;
}
}
//不选
btn2.onclick=function () {
for(var i=0;i<che.length;i++){
che[i].checked=true;
}
}
//反选
btn3.onclick=function () {
for(var i=0;i<che.length;i++){
if (che[i].checked==true){
che[i].checked=false;
}else{
che[i].checked=true;
}
}
}
}
</script>
<body>
<input type="button" id="btn1" value="全选"/>
<input type="button" id="btn2" value="不选"/>
<input type="button" id="btn3" value="反选"/>
<div id="div1">
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
<input type="checkbox" name="box"/>
</div>