js学习---1 - 爱码网

1：本篇实现一个简单复选框的全选、全不选、反选功能。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>js练习复选框功能</title>
<script type="text/javascript">

window.onload=function() {

                     var oBtn1=document.getElementById('btn1');
   var oBtn2=document.getElementById('btn2');
   var oBtn3=document.getElementById('btn3');
                     var oDiv=document.getElementById('drt');
   var oCh=oDiv.getElementsByTagName('input');

//通过属性id，实现点击全选按钮功能

                     oBtn1.onclick=function(){
for(var i=0;i<oCh.length;i++) {
                                oCh[i].checked=true;
   }
                 };

//通过属性id，实现点击全不选按钮功能

                      oBtn2.onclick=function(){
                              for(var i=0;i<oCh.length;i++){
       oCh[i].checked=false;
}
                      };

//通过属性id，实现点击反选按钮功能，通过if判断

                      oBtn3.onclick=function(){
                             for(var i=0;i<oCh.length;i++){
       if(oCh[i].checked==true){
           oCh[i].checked=false;
                           }else {
                                  oCh[i].checked=true;
}
}
};

};
   </script>
</head>
<body>
<input id="btn1" type="button" value="全选"/>
<input id="btn2" type="button" value="不选"/>
<input id="btn3" type="button" value="反选"/>
<div id="drt">
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
<input type="checkbox"/><br>
</div>
</body>
</html>

2：功能实现

全选：

js学习---1

反选：

js学习---1

3：小结

本编重点在于通过属性id实现点击事件，以及复选框属性赋值true 和 false，在实现反选功能时使用了if判断语句。