JavaScript实现全选和反选

最新推荐文章于 2023-07-11 22:34:21 发布

是阿臻

最新推荐文章于 2023-07-11 22:34:21 发布

阅读量292

点赞数

文章标签： JavaScript 按钮反选全选

本文链接：https://blog.csdn.net/weixin_43191327/article/details/102501685

版权

这里使用的jQuery实现的全选反选

此处为html和css,因为喜欢军人所以做了一个关于当兵的表格,如果里面的方法不明白可以点一下链接去看一下文档,都是我自己的看法,我是小白,感觉不好就随便看看,希望不会给小白们造成误解.

<style>
    .box {
      width: 200px;
      margin: 0 auto;
    }

    input {
      width: 20px;
    }
    th{
      width: 100%;
      text-align: center;
      border: 1px solid;
    }
    td{
     
      width: 50px;
      text-align: center;
    }
   
  </style>
</head>
<body>
  <table class="box" border="1">
    <tr>
      <th colspan="2">志愿兵种</th>
    </tr>
    <tr>
      <td>全选</td>
      <td><input type="checkbox" class="all"></td>

    </tr>
    <tr>
      <td>反选</td>
      <td><input type="checkbox" class="reverse"></td>

    </tr>
    <tr>
      <td>陆军</td>
      <td><input type="checkbox" class="btn"></td>

    </tr>
    <tr>
      <td>海军</td>
      <td><input type="checkbox" class="btn"></td>

    </tr>
    <tr>
      <td>空军</td>
      <td><input type="checkbox" class="btn"></td>

    </tr>
    <tr>
      <td>海军</td>
      <td><input type="checkbox" class="btn"></td>

    </tr>
    <tr>
      <td>火箭军</td>
      <td><input type="checkbox" class="btn"></td>

    </tr>
  </table>
</body >

此处为js代码

<script>
    var $allBtn = $('.all');
    var $btn = $('.btn');
    var $reverse = $('.reverse');
    
    // 全选开始
   
    $allBtn.click(function () {
      var status = $allBtn.prop('checked')
      $btn.prop('checked', status);
    })
   
    // 反选开始
    $reverse.click(function () {
      $btn.each(function () {
        if ($(this).prop('checked') == true) {
          $(this).prop('checked', false)
        } else if ($(this).prop('checked') == false) {
          $(this).prop('checked', true);
        }
      })
      // 此处调用check方法,当全部为了未选中时.点击反选,为全部选中所以全选按钮也要改变其状态
      check();
    })
    
    $btn.click(function () {
      check();
    })
     // 当点击按钮时检查每一个按钮是否被选中,封装成为了一个方法方便随时调用
    function check(params) {
      var flag = true;
      $btn.each(function () {
        if ($(this).prop('checked') != true) {
          flag = false;
          console.log(flag);
        }
        $allBtn.prop('checked', flag);
      })
    }
  </script>

全选部分很简单就不做解释了
此处为反选部分
当点击反选按钮的时候就要使用jQuery里面each()方法(each()方法的学习文档),此方法为循环遍历,去遍历每一个按钮的选中状态,然后使用if语句来辨别这个按钮的选中状态,如果选中就使用prop()(prop()的学习文档)方法给其赋值相反的状态.

  //反选开始
    $reverse.click(function () {
      $btn.each(function () {
        if ($(this).prop('checked') == true) {
          $(this).prop('checked', false)
        } else if ($(this).prop('checked') == false) {
          $(this).prop('checked', true);
        }
      })
      // 此处调用check方法,是因为当全部为未选中的时候.点击反选,
      //按钮状态全部变为全部选中所以全选按钮也要改变其状态,所以每一次点击反选按
      //钮后都调用check()方法检查按钮状态
      check();
    })

此处为check()方法

我将检查按钮状态的函数封装成为了一个方法,以方便随时调用,也是利用了each()方法遍历每一个按钮的状态,先是声明了一个变量,给其赋值了一个true布尔值,在遍历的过程中如果有一个按钮没有被选中,布尔值就会变为false,所以遍历结束后,利用 prop()方法将flag的值赋值给全选按钮,必须全部的按钮被选中,if()语句才不会执行,flag的值仍然是true,这个时候全选按钮才会被选中

 function check(params) {
      var flag = true;
      $btn.each(function () {
        if ($(this).prop('checked') != true) {
          flag = false;
          console.log(flag);
        }
        //$allBtn为全选按钮的变量名
        $allBtn.prop('checked', flag);
      })
    }

是阿臻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现全选和反选

这里使用的jQuery实现的全选反选此处为html和css,因为喜欢军人所以做了一个关于当兵的表格,如果里面的方法不明白可以点一下链接去看一下文档,都是我自己的看法,我是小白,感觉不好就随便看看,希望不会给小白们造成误解.<style> .box { width: 200px; margin: 0 auto; } input {...
复制链接

扫一扫