删除后，jQuery取消选中复选框（）;

Question

如何uncheck使用input[name='select-check通过此功能删除.item之后的所有remove();？

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

此过程用于演示项目选择和删除过程的完成。删除后，不应保留任何选项，因此.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

$(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", $("input[name='select-check']:checked").length);
}); 
//delete selected inputs
$(".delete").click(function(event) {
  event.preventDefault();
  $(".post-list")
    .find(".select-input:checked")
    .closest(".item")
    .remove();

    $(".delete").removeClass('active');
});

  

$（ “删除”）。removeClass（ '主动'）;

删除按钮将删除活动类

Answer 2

每次发生事件时，请检查checked复选框的数量。如果其长度为0，则使用以下命令删除类：

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

完整代码：

＆＃13;

＆＃13;

$(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');
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 3

我认为我简化了你的代码......添加行为时。

现在，当选中一个或多个.select-input时，删除按钮会显示颜色...当然，当检查.select-all时。

如果取消选中至少一个.select-input，则.select-all也是。

我认为我在这里添加的主要技巧是使用.trigger()来使用所需行为的一些已编写部分。然后，使用有意义的变量名称有很大帮助。 btncolor是复选框集合并不总是很明显。

查看代码中的注释。

另请注意，没有作为参数传递的事件处理程序的.change()严格禁止。要触发更改事件，您需要.trigger("change")

$(document).ready(function() {

  $(".select-all").on("change", function() {
    
    // Look if the select all control is checked.
    var isChecked = $(this).is(":checked");
    
    // Check the select input and add a color to the delete button -- Or the opposite.
    $(".select-input").prop("checked", isChecked);
    $(".delete").toggleClass("active", isChecked);
  });

  // Add a color to the delete button
  $(".select-input").on("change", function(){
    
    // Look if at least one checkbox is checked.
    var isChecked = $(".select-input").is(":checked");
    
    // Add or remove the color of the delete button
    $(".delete").toggleClass("active", isChecked);
    
    // Look if ALL checkboxes are checked.
    var areAllChecked = true;
    $(".select-input").each(function(){
      if(!$(this).is(":checked")){
        areAllChecked = false;
      }
    });
    
    // Need to have the select all control checked or unchecked?
    $(".select-all").prop("checked", areAllChecked);
  });

  // Delete selected inputs
  $(".delete").on("click",function(event) {
    $(".select-input:checked")
      .closest(".item")
      .remove();
    
    // Uncheck the select all control.
    $(".select-all").prop("checked",false).trigger("change");
  });

});

.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>