复选框全选反选功能-优快云博客

本文介绍了一个简单的复选框全选、全不选及反选功能的实现方法。通过JavaScript操作DOM元素，实现了按钮点击事件，完成对复选框状态的控制。全选功能使所有复选框被选中，全不选功能则取消所有复选框的选择状态，反选功能则是将当前已选择的复选框设置为未选中，反之亦然。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>