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

诺诺的程序之旅

于 2024-01-15 02:52:58 发布

阅读量402

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/2201_75368306/article/details/135591900

版权

<!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>

诺诺的程序之旅

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
利用js实现input属性中的checked全选，不选与反选

全选</button>/*设置按钮*/<button id="second">全不选</button><button id="third">反选编号</li><li>操作</li><li>科目</li><li>价格</li><li>科目</li><li>价格</li><li>科目</li><li>价格</li><li>科目
复制链接

扫一扫