使用 Jquery 选中/取消选中输入框 [重复]

Posted 2023-03-05

【中文标题】使用 Jquery 选中/取消选中输入框 [重复]

【英文标题】：Check / Uncheck Input Boxes with Jquery [duplicate]

【发布时间】：2014-08-23 20:13:44

【问题描述】：

我一直在寻找试图找到答案的帖子，但没有任何运气，所以希望有人能指出我正确的方向。

当我使用以下代码时，它会检查所有输入框并取消选中它们。但是，如果我再次单击全部检查，它不会全部检查。这是为什么呢？

JQuery

  $('document').ready( function() 
    $('.check_boxes').click( function() 
      if ( $(':checkbox').attr('checked')) 
        $(':checkbox').attr('checked', false);
       else 
        $(':checkbox').attr('checked', true);
           
    );
);

HTML

<input type="checkbox" class="check_boxes" id="check_all" />

【问题讨论】：

尝试使用.prop 而不是.attr

好的，这是你的演示 jsfiddle.net/vhLMN/14 你想要什么？

【参考方案1】：

试试这个：

js

  $('document').ready( function() 
    $('.check_boxes').click( function() 
      if ( $('input:checkbox').prop('checked')) 
        $('input:checkbox').prop('checked', true);
       else 
        $('input:checkbox').prop('checked', false);
           
    );
);

fiddle

【讨论】：

谢谢。如果检查了其中一个输入，则检查所有输入仍保持选中状态：/

我以为你想要一个复选框来选中/取消选中所有。如果我错了，请纠正我。

是的，这是真的……只是认为如果其中一个输入未被选中，它会取消选中。我还在学习js。

【参考方案2】：

实际上，一旦您单击复选框，第一个 if 始终为 true。因此，所有复选框都未选中（包括您单击的复选框）。

我假设你想要这种行为： http://jsfiddle.net/vhLMN/18/

$('document').ready( function() 
    $('.check_boxes').click( function() 
      if ( !this.checked ) 
        $('.flip_us :checkbox').attr('checked', false);
       else 
        $('.flip_us :checkbox').attr('checked', true);
      ;     
    );
);

顺便说一句。输入没有label 属性。你应该修复这个问题，除非你使用一些框架来创建实际的label tag。

【讨论】：

不错，应该是id=，谢谢！

【参考方案3】：

我认为你需要这个简单的代码：

$('document').ready( function() 
$('.check_boxes').click( function() 
  if ( $(':checkbox').prop('checked')) 
    $(':checkbox').prop('checked', true);
   else 
    $(':checkbox').prop('checked', false);
       
 );
);

【讨论】：

这里是演示jsfiddle.net/vhLMN/17

太棒了，谢谢！我离得不远:)我之前尝试过使用 .prop() ，但它并没有像我拥有代码的方式那样工作。现在，如果未选中其中一个输入，我将如何自动取消选中检查所有输入？

第 3 行也需要是 .prop，对吗？否则我的代码不起作用。

那行不通。见jsfiddle.net/vhLMN/21

这些都不起作用，请参阅jsfiddle.net/vhLMN/23