无法清除 Jquery 中的所有复选框

Can't get clear all checked boxes in Jquery

本文关键字：复选框 清除 Jquery      更新时间：2023-09-26

我已经尝试了几种不同的方法，但在选中所有框后，无法让代码取消选中或清除所有复选框。最新代码看起来像... 

$(".select_all").click(function(){
    var state = ($(this).html() == "Select All") ? true : false;    
    $(this).html((state) ? "Clear" : "Select All");
    if ($(':checked').prop('checked', false)) {
        $(':checkbox').each(function() {
         this.checked = true;                      
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                      
        });                                      
    };                                           
})

如果我说得对，你需要这样的东西。检查下面的代码片段或此 JSFiddle。

$(".select_all").click(function(){
  var state = $(this).html() == "Select All";
  $(this).html((state) ? "Clear" : "Select All");
  $('input:checkbox').prop('checked', state);        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<a href="#" class="select_all">Select All</a>

根据可能的 HTML，select_all 元素可以是复选框或按钮或其他元素。我假设您处于前两种可能性之一。

$(function () {
  $(".select_all").click(function(e){
    e.preventDefault();
    var state = ( $(this).html() == "Select All") ? true : false;
    $(this).html((state) ? "Clear" : "Select All");
    $(':checkbox').prop('checked', state);
  });
  
  $(".select_all1").click(function(e){
    var state = ( this.nextSibling.textContent == "Select All") ? true : false;
    $(':checkbox').prop('checked', state);
    this.nextSibling.textContent = (state) ? "Clear" : "Select All";
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form action="demo.asp">
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car"> I have a car<br>
    <input type="checkbox" name="vehicle" value="Truck"> I have a car<br>
    <input type="checkbox" class="select_all1" name="selectAll" value="selectAll">Select All<br>
    <input type="submit" value="Submit">
    <button class="select_all">Select All</button>
</form>

$(':checked').prop('checked', false)将

属性设置为在每个复选框上false。它不返回true/false，所以不能用作if中的条件。如果要测试是否没有复选框，请使用：

if ($(':checked').length == 0)

然后要选中所有框，您可以执行以下操作：

$(':checkbox').prop('checked', true);
但是实际上根本不

需要做这个检查;你已经在函数顶部的state变量中确定了它是全选还是清除。

你不需要使用 .each() - 当选择器匹配多个元素时，所有 jQuery 函数都会自动修改 DOM 循环。

而且很少需要在三元中使用? true : false - 您可以简单地将之前的表达式用作布尔值。

所以完整的代码是：

$(".select_all").click(function(){
    var state = $(this).text() == "Select All";    
    $(this).text(state ? "Clear" : "Select All");
    $(':checkbox').prop('checked', !state);                               
});
相关文章：