jquery全选全不选详解

发布时间：2023-05-19

一、jquery实现全选

在实际项目中，有时候需要对多个input checkbox进行全选或全不选操作，这时候可以使用jquery来方便地实现。

<script>
   // 给全选的checkbox添加点击事件
   $('#selectAll').on('click', function() {
       $('input[type="checkbox"]').prop('checked', true);
   });
</script>

上述代码中，我们给一个名为"selectAll"的checkbox添加了点击事件，当这个checkbox被点击后，所有type为checkbox的input都会被选中。 但是，如果已经有部分checkbox被选中，我们再点击全选，则会取消选中状态，这并不是我们想要的效果。 下面我们对代码进行修改，先判断全选checkbox是否被选中（prop('checked')返回一个布尔值），如果已选中则将所有复选框设为选中状态，否则将所有复选框设为不选中状态。

<script>
   $('#selectAll').on('click', function() {
       $('input[type="checkbox"]').prop('checked', $(this).prop('checked'));
   });
</script>

二、jquery 全选

以上代码可以实现全选功能，但是在实际应用中还有一种情况：每个选项后面都有对应的数量，选中后需要计算总数量，在全选的基础上，还需要计算总数量。

<script>
   $('#selectAll').on('click', function() {
       var total = 0;
       $('input[type="checkbox"]').each(function() {
           if($(this).prop('checked')) {
               total += parseInt($(this).next().text());
           }
           $(this).prop('checked', true);
       });
       $('#total').text(total);
   });
</script>

以上代码中，我们定义了一个变量total，用于累加选中的数量。每个复选框被选中后，我们获取它的下一个元素，即数量，将其转为整数并累加到total中。 最后，我们设置总数量的文本为total。这样就可以实现全选并计算数量的功能。

三、jquery实现复选框全选选取

在实际项目中，往往还需要对多个复选框进行全选选取操作，这时候我们需要使用jquery的each函数遍历每个checkbox，用一个计数器记录选中的个数，如果遍历完所有checkbox后计数器等于复选框的个数，则表示所有复选框都被选中，此时我们将全选checkbox设为选中状态即可。

<script>
   $('input[type="checkbox"]').on('click', function() {
       var count = 0;
       $('input[type="checkbox"]').each(function() {
           if($(this).prop('checked')) {
               count++;
           }
       });
       if(count == $('input[type="checkbox"]').length) {
           $('#selectAll').prop('checked', true);
       } else {
           $('#selectAll').prop('checked', false);
       }
   });
</script>

以上代码中，我们给每个复选框添加了点击事件。在事件处理函数中，我们先遍历每个复选框，如果被选中则计数器加1。如果计数器等于复选框的总个数，则表示所有复选框都被选中，此时将全选checkbox设为选中状态，否则设为不选中状态。 至此，我们就实现了复选框的全选选取功能。

推荐文章