JS实现复选框（全选/全不选/反选）

jiabaMG

于 2023-12-13 11:28:53 发布

阅读量1k

点赞数 24

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/m0_70242615/article/details/134967838

版权

本文展示了一个简单的JavaScript代码片段，演示如何使用DOM操作HTML中的复选框，实现全选、全不选和反选功能。

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

代码示例：

<body>
       <input type="button" id="checkBtn" value="全选"/>
       <input type="button" id="cancelBtn" value='全不选' />
       <input type="button" id='inverseBtn' value="反选">
       <br />
       <br />
       <input type="checkbox" name="hobbies" />踢足球
       <input type="checkbox" name="hobbies" />打篮球
       <input type="checkbox" name="hobbies" />羽毛球

       <br />
       <input type="checkbox" name="hobbies" />曲棍球
       <input type="checkbox" name="hobbies" />撑杆跳
       <input type="checkbox" name="hobbies" />橄榄球
       <br />
       <input type="checkbox" name="hobbies" />棒球
       <input type="checkbox" name="hobbies" />滑雪
       <input type="checkbox" name="hobbies" />跳高
       <br />
       <input type="checkbox" name="hobbies" />跑步
       <input type="checkbox" name="hobbies" />跳远
       <input type="checkbox" name="hobbies" />飞盘
       <br />
       <input type="checkbox" name="hobbies" />滑冰
       <input type="checkbox" name="hobbies" />排球
       <input type="checkbox" name="hobbies" />摆烂
   </body>
   <script>
       var rBtn = document.getElementById('rBtn');
       var cBtn = document.getElementById('checkBtn');
       var hobbyObj = document.getElementsByName('hobbies');
       var cancelBtn = document.getElementById('cancelBtn');
       var inverseBtn = document.getElementById('inverseBtn');
       // 全选
       cBtn.onclick = function(){
           for(var i = 0 ; i < hobbyObj.length ;i++ ){
               hobbyObj[i].checked = true;
           }
       }
       // 全不选
       cancelBtn.onclick = function() {
           for(var i = 0 ; i < hobbyObj.length ;i++ ){
               hobbyObj[i].checked = false;
           }
       }
       // 反选
       inverseBtn.onclick = function(){
           for(var i = 0 ; i < hobbyObj.length;i++){
               if(hobbyObj[i].checked == true){
                   hobbyObj[i].checked = false;
               }else {
                   hobbyObj[i].checked = true;
               }
           }
       }