js按钮全选反选

最新推荐文章于 2020-05-22 18:47:03 发布

sujiao666

最新推荐文章于 2020-05-22 18:47:03 发布

阅读量412

点赞数

分类专栏：前端js

本文链接：https://blog.csdn.net/u013195452/article/details/52746418

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div>
           <input type="button" name="button1" id="button1" value="全选" />
           <input type="button" name="button2" id="button2" value="反选" />
           <input type="checkbox" name="check" id="checkbox" value="" />
           <ul>
               <li><input type="checkbox" id="checkbox1" /></li>
               <li><input type="checkbox" id="checkbox2" /></li>
               <li><input type="checkbox" id="checkbox3" /></li>
               <li><input type="checkbox" id="checkbox4" /></li>
               <li><input type="checkbox" id="checkbox5" /></li>
               <li><input type="checkbox" id="checkbox6" /></li>
               <li><input type="checkbox" id="checkbox7" /></li>
               <li><input type="checkbox" id="checkbox8" /></li>
               <li><input type="checkbox" id="checkbox9" /></li>
               <li><input type="checkbox" id="checkbox10" /></li>
           </ul>
       </div>
   </body>
   <script>
   var oBtn1 = document.getElementById('button1');
   var oBtn2 = document.getElementById('button2');
   var iN = document.getElementById('checkbox');
   var aLL = document.querySelectorAll('li input');

   oBtn1.onclick = function(){
       for(var i = 0; i < aLL.length; i++){
           aLL[i].checked = true;
       }
       iN.checked = true;
   }
   oBtn2.onclick = function(){
       for(var i = 0; i < aLL.length; i++){
           aLL[i].checked = !aLL[i].checked;
       }
       iN.checked = true;
       for(var i = 0; i < aLL.length; i++){
           if(aLL[i].checked == false){
               iN.checked = false;
           }
       }
   }
   for (var i = 0; i< aLL.length;i++) {
       aLL[i].onclick = function(){
           iN.checked = true;
           for (var i = 0; i< aLL.length;i++) {
               if(aLL[i].checked == false){
                   iN.checked = false;
               }
           }
       }
   }






























//   oBtn1.onclick = function(){
//       for (var i = 0; i < aLL.length; i ++) {
//           aLL[i].checked = true;
//       }
//       iN.checked = true;
//   }
//   var num = 0;
//   oBtn2.onclick = function(){
//       for (var i = 0; i < aLL.length; i ++) {
//           aLL[i].checked = !aLL[i].checked;
//           num++;
//       }
//       iN.checked = true;
//               for (var i = 0;i<aLL.length;i++) {
//               if(aLL[i].checked == false){
//                   iN.checked = false;
//               }
//       }
//
//   }
//   for (var i = 0;i<aLL.length;i++) {
//           aLL[i].onclick = function(){
//               iN.checked = true;
//               for (var i = 0;i<aLL.length;i++) {
//               if(aLL[i].checked == false){
//                   iN.checked = false;
//               }
//       }
//           }
//
//       }
   </script>
</html>