如何使用jQuery检查所有复选框？

IT技术 javascript jquery checkbox
2021-01-27 05:15:20

我不是 jQuery 专家，但我尝试为我的应用程序创建一个小脚本。我想检查所有复选框，但它无法正常工作。

首先我尝试使用attr，然后我尝试使用prop但我做错了。

我先试过这个：

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

但这没有用。

下一篇：这比上面的代码效果更好

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

这两个例子都不起作用。

JSFiddle：http : //jsfiddle.net/hhZfu/4/

6个回答

您需要使用.prop()来设置选中的属性

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

演示：小提琴

@ArunPJohny，id 在单个页面中应该是唯一的，我们如何使用类示例jsfiddle.net/52uny55w使用相同的功能
2021-03-16 05:15:20
你的帖子这个答案有什么区别，为什么使用not(this).prop？
2021-03-19 05:15:20
如果您打算使用 jQuery，那么请使用 jQuery。将 jQuery 与内联 Javascript 混合使用并不是一个好主意。例如，这很糟糕：<elementtag id="someID" onclick="javascript code here"--- 相反，使用 jQuery：$('#someID').click(function() { checkAll() });
2021-03-23 05:15:20
@ArunPJohny，感谢您的时间。我想在 jquery 上向你学习很多东西，你能在 jquery 上推荐我吗
2021-03-25 05:15:20
哇感谢您的快速答复。这项工作很好，但在我的应用程序中，我有一张假支票。当我刷新页面ctrl+r并单击复选框时，checkAll他不会全部检查我。之后我必须再次检查才能成功。所以我需要 2 次点击checkAll无法在单次点击（一次）上工作的东西？我复制粘贴该代码并制作功能checkAll()并在我设置的复选框中onclick="return checkAll()"
2021-04-14 05:15:20

只需使用 的checked属性checkAll并使用prop()而不是 attr 来检查属性

现场演示

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

使用 prop() 而不是 attr() 用于检查的属性

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选中或禁用状态，请使用 .prop() 方法

您的复选框具有相同的 id，并且它应该是唯一的。您最好使用一些具有相关复选框的类，以便它不包含您不想要的复选框。由于 $('input:checkbox')将选择页面上的所有复选框。如果您的页面扩展了新的复选框，那么它们也会被选中/取消选中。这可能不是预期的行为。

现场演示

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

一个完整的解决方案在这里。

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html 应该是：

选中的三个复选框上的单个复选框将被选中和取消选中。

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

希望这对某人有帮助，就像对我一样。

JS小提琴https://jsfiddle.net/52uny55w/

这是我一直在寻找的东西......谢谢！
2021-03-15 05:15:20
您可以$("#checkedAll").change通过将其更改为以下内容来缩短功能：var val = this.checked; $(".checkSingle").each( function() { this.checked=val; });
2021-03-23 05:15:20
另外，我认为最好将isAllChecked变量重命名为isThereUncheckedor ，unChecked以便更好地描述变量的用途。
2021-03-25 05:15:20
我喜欢这个解决方案，因为如果您取消选中其中一个框，“全部选中”框也会被取消选中。同样，如果您手动选中所有相应的框，“全部选中”框也会被选中。这是很棒的 UI 反馈！
2021-03-28 05:15:20
我采用了这个解决方案，这就是我要找的，谢谢
2021-04-01 05:15:20

我认为当用户手动选择所有复选框时，应自动选中 checkall 或用户从所有选定的复选框中取消选中其中一个复选框，然后应自动取消选中 checkall。这是我的代码.. 

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

谢谢！我更喜欢这个，因为在选中所有复选框之后，当我们取消选中其中一个时，选中所有复选框将被取消选中。
2021-04-06 05:15:20

你为什么不试试这个（在第二行'form#'你需要放置你的html表单的正确选择器）：

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

你的 html 应该是这样的：

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

我希望这有帮助。

其它你可能感兴趣的问题
上一篇`useRef` 和 `createRef` 有什么区别？ 下一篇componentDidMount 调用 BEFORE ref 回调