使用 Jquery 检查多个复选框答案

【问题标题】：Checking Multiple checkboxes using Jquery使用 Jquery 检查多个复选框
【发布时间】：2015-10-26 15:19:49
【问题描述】：

在我的应用程序中，我使用单个复选框来“全选”其他复选框。下面是我的代码 sn-p 对我有用。但是我需要一个更短的方法来减少我的代码行数。

$('#CheckAll').change(function(){   
                if ($(this).is(":checked")) {                                       
                    $('.checkboxes').each(function(){                                   
                        $(this).prop("checked", true);                      
                    });
                }
                else{               
                    $('.checkboxes').each(function(){                                   
                        $(this).prop("checked", false);                                                 
                    });             
                }               
            });

有没有更简单的方法可以使用“三元运算符”来实现这一点。

【问题讨论】：

标签： javascript jquery checkbox ternary-operator

【解决方案1】：

试试这个demo

$("#CheckAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

【讨论】：

没什么大不了的..但是当你检查所有>取消选中（示例）2，检查所有保持选中:)
@ManojDhiman 也.. 没什么大不了的.. 你有 3 个相同的 id 的 :p 更改类.. 很容易 :p

【解决方案2】：

如果您真的想使用三元运算符 (fiddle)：

$('#CheckAll').change(function () {
    ($(this).is(":checked") ? $('.checkboxes').prop("checked", true) :    $('.checkboxes').prop("checked", false))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='CheckAll'> Check all
<br><br>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>

但是，您可以通过使用选择器来（取消）选择复选框来缩短它：

$('#CheckAll').change(function() {
  if ($(this).is(":checked")) {
    $('.checkboxes').prop("checked", true);
  } else {
    $('.checkboxes').prop("checked", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='CheckAll'>Check all
<br>
<br>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>

【讨论】：

【解决方案3】：

使用这个：

   $('#CheckAll').change(function(){   
                    if ($(this).is(":checked")) {                                       
                        $('.checkboxes').prop("checked", true);                      

                    }
                    else{               
                        $('.checkboxes').prop("checked", false);                                                        
                    }               
                });

【讨论】：

请检查答案中的双点。

【解决方案4】：

试试这个：

  var chks = $('.checkboxes'); // cache all once
  $('#CheckAll').change(function(e) {
    chks.prop('checked', this.checked);
  });

【讨论】：

【解决方案5】：

$('#CheckAll').change(function(){
    $('.checkboxes').prop("checked",$(this).prop("checked"));
});

【讨论】：