javascript - jQuery 在 remove() 之后取消选中复选框；

Question

在使用 函数删除 .item 后，如何取消选中所有 input[name='select-check删除()；？

我希望 .active 类在每次选择 input[name='select-check 时保留在 .delete 按钮上如果一个项目被删除，checkboxes 需要被unchecked。

这个过程是为了演示一个项目选择和删除过程的完成。删除后，不应保留任何选择，因此 .delete 按钮不再处于 .active 状态。

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
  });
});
//delete btn color
var btncolor = $("input[name='select-check']:checkbox");
btncolor.on("change", function() {
  $(".delete").toggleClass("active", btncolor.is(":checked"));
});
//delete selected inputs
$(".delete").click(function(event) {
  event.preventDefault();
  $(".post-list")
    .find(".select-input:checked")
    .closest(".item")
    .remove();
});

.active {
  color: red;
}

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.select-block {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <div class="selectall-btn">
    <input type="checkbox" id="selectall" class="select-all" name="select-check" />
    <label class="selectall-label" for="selectall"><span></span>Select All
</label>
  </div>
  <button class="delete">delete</button>
</div>
<div class="post-list">
  <div class="item">
    <div class="select-block">
      <label class="pick-select">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
    </div>
  </div>
  <div class="item">
    <div class="select-block">
      <label class="pick-select">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
    </div>
  </div>
</div>

Answer 1

每次事件发生时检查checked复选框的数量。如果它的长度为 0，删除类:

if ($(".select-input:checked").length == 0) {
  $(".delete").removeClass('active');
}

完整代码:

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
    if ($(".select-input:checked").length == 0) {
      $(".delete").removeClass('active');
    }
  });
});
//delete btn color
var btncolor = $("input[name='select-check']:checkbox");
btncolor.on("change", function() {
  $(".delete").toggleClass("active", btncolor.is(":checked"));
  if ($(".select-input:checked").length == 0) {
    $(".delete").removeClass('active');
  }
});
//delete selected inputs
$(".delete").click(function(event) {
  event.preventDefault();
  $(".post-list")
    .find(".select-input:checked")
    .closest(".item")
    .remove();

  if ($(".select-input:checked").length == 0) {
    $(".delete").removeClass('active');
  }
});

.active {
  color: red;
}

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.select-block {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <div class="selectall-btn">
    <input type="checkbox" id="selectall" class="select-all" name="select-check" />
    <label class="selectall-label" for="selectall"><span></span>Select All
</label>
  </div>
  <button class="delete">delete</button>
</div>
<div class="post-list">
  <div class="item">
    <div class="select-block">
      <label class="pick-select">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
    </div>
  </div>
  <div class="item">
    <div class="select-block">
      <label class="pick-select">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
    </div>
  </div>
</div>

更好的方法是为文档定义此事件处理程序:

$(document).on('click change', function() {
  if($(".select-input:checked").length == 0) {
    $(".delete").removeClass('active');
  }
})