利用js实现input属性中的checked全选，不选与反选

最新推荐文章于 2025-04-15 17:55:57 发布

原创最新推荐文章于 2025-04-15 17:55:57 发布

· 868 阅读

10 ·

版权

文章标签：

#javascript

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个包含多个复选框的表单，通过按钮实现全选、全不选和反选功能，展示了前端开发中基础交互的实现方法。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>/*设计一个表单*/
           div{
               width: 250px;
               height: 30px;
               float: left;
           }
       ul li{
           list-style: none;
           width: 50px;
           height: 30px;
           border: 1px solid;
           float: left;
       }
       </style>
   </head>
   <body>
       <div>
       <ul>
           <li>编号</li>
           <li>操作</li>
           <li>科目</li>
           <li>价格</li>
       </ul>
       <ul>
           <li>1</li>/*将需要选择的框设置名字为checkbox*/
           <li><input type="checkbox" class="li" name="checkbox"></li>
           <li>科目</li>
           <li>价格</li>
       </ul>
       <ul>
           <li>2</li>
           <li><input type="checkbox" class="li" name="checkbox"></li>
           <li>科目</li>
           <li>价格</li>
       </ul>
       <ul>
           <li>3</li>
           <li><input type="checkbox" name="checkbox"></li>
           <li>科目</li>
           <li>价格</li>
       </ul>
       </div>
       <button id="first">全选</button>/*设置按钮*/
       <button id="second">全不选</button>
       <button id="third">反选</button>
   </body>
   <script>
       var lis=document.getElementsByName('checkbox');/*获取到所有需要选择的框*/
       var first=document.querySelector('#first');/*全选*/
       var second=document.querySelector('#second');/*全不选*/
       var third=document.querySelector('#third');/*反选*/
       first.οnclick=function(){/*按钮一设置点击鼠标事件，利用for循环遍历所有选择框*/
           for(var i=0;i<lis.length;i++){
               lis[i].checked=true;
           }
       }
       second.οnclick=function(){/*按钮二设置点击鼠标事件，利用for循环遍历所有选择框*/
           for(var i=0;i<lis.length;i++){
               lis[i].checked=false;
           }
       }
       third.οnclick=function(){
           for(var i=0;i<lis.length;i++){
               if(lis[i].checked==false){
               lis[i].checked=true;}
               else{lis[i].checked=false;}
           }
       }
   </script>
</html>