jquery全选和全不选效果

jQuery 的全选功能可以通过以下步骤实现：

1、在 HTML 中创建一个复选框作为全选按钮，并为其添加一个特定的类名，"selectall"，为需要全选的其他复选框添加一个共同的类名，"checkboxitem"。

<input type="checkbox" class="selectall"> 全选/取消
<div>
  <input type="checkbox" class="checkboxitem"> 选项1
  <input type="checkbox" class="checkboxitem"> 选项2
  <input type="checkbox" class="checkboxitem"> 选项3
</div>

2、接下来，使用 jQuery 为全选按钮添加点击事件监听器，当全选按钮被点击时，检查其是否被选中，如果被选中，则将所有带有 "checkboxitem" 类名的复选框设置为选中状态；否则，取消选中状态。

$(document).ready(function() {
  $(".selectall").on("click", function() {
    if ($(this).is(":checked")) {
      $(".checkboxitem").prop("checked", true);
    } else {
      $(".checkboxitem").prop("checked", false);
    }
  });
});

3、为每个带有 "checkboxitem" 类名的复选框添加点击事件监听器，当某个复选框被点击时，检查其他复选框的状态，如果所有复选框都被选中，则将全选按钮设置为选中状态；否则，取消全选按钮的选中状态。

$(document).ready(function() {
  $(".checkboxitem").on("click", function() {
    var total = $(".checkboxitem").length;
    var checkedCount = $(".checkboxitem:checked").length;
    if (total === checkedCount) {
      $(".selectall").prop("checked", true);
    } else {
      $(".selectall").prop("checked", false);
    }
  });
});

通过以上步骤，即可实现 jQuery 的全选功能，当用户点击全选按钮时，所有复选框将被选中或取消选中，当用户点击某个复选框时，全选按钮的状态也会相应地更新。