复选框默认图标不随 jQuery 更新答案

【问题标题】：Checkbox default icon doesn’t update with jQuery复选框默认图标不随 jQuery 更新
【发布时间】：2014-08-13 10:33:33
【问题描述】：

我有一个简单的脚本，在<a> 上单击它会选中或取消选中一个复选框。第一次一切正常，但是一旦使用 jQuery 更改了值，它就不会被更新（尽管在 Chrome 的检查器中，属性 checked="checked" 正在被添加/删除）。

HTML：

<a href="#" class="js-tick-untick-checkbox">
    <input type="checkbox" class="send-invite-checkbox" />
    Something something in the month of May
</a>

jQuery:

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox');

  if ($(checkbox).attr('checked') === 'checked') {
    checkbox.removeAttr('checked');
    $(this).removeClass('selected-element');
  } else {
    checkbox.attr('checked', 'checked');
    $(this).addClass('selected-element');
  }
  return false;
})

查看演示：http://jsfiddle.net/y3e0jfc6/

我尝试了各种其他选项，例如 checked="true" / checked="false"，但都没有用……

有什么想法吗？谢谢。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

使用prop() 而不是attr()

来自docs：

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

$('.js-tick-untick-checkbox').click(function () {
    var checkbox = $(this).find('.send-invite-checkbox');
    if ($(checkbox).prop('checked')) {
        checkbox.prop('checked', false);
        $(this).removeClass('selected-element');
    } else {
        checkbox.prop('checked', true);
        $(this).addClass('selected-element');
    }
    return false;
})

Demo

旁注：你也可以像this 那样做。

【讨论】：

谢谢，应该使用prop()。
@TJ，我建议使用checkbox.prop('checked', true); 而不是 checkbox.prop('checked', true);
@AmitAgrawal 你的意思是引号是真的吗？我也更喜欢布尔值......更新......

【解决方案2】：

您应该改用$.prop()。

checkbox.prop('checked', true);
checkbox.prop('checked', false);

【讨论】：

【解决方案3】：

试试这个代码

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox');

    if ($(checkbox).is(':checked')) {
    checkbox.prop('checked', false);
    $(this).removeClass('selected-element');
  } else {
    checkbox.prop('checked', true);
    $(this).addClass('selected-element');
  }
  return false;
});

【讨论】：

【解决方案4】：

你应该使用 .prop 而不是 .attr

更新的jquery

$('.js-tick-untick-checkbox').click(function() {
var checkbox = $(this).find('.send-invite-checkbox');

if ($(checkbox).prop('checked') == true) {
checkbox.prop('checked', false);
$(this).removeClass('selected-element');
} else {
checkbox.prop('checked', true);
$(this).addClass('selected-element');
}
return false;
})

在 jQuery 1.6 之前，可以使用 .attr() 方法检索这些属性，但这不在 attr 的范围内。 Source

【讨论】：

TN 也建议这样做。任何区别

【解决方案5】：

$('.js-tick-untick-checkbox').click(function() {
  var checkbox = $(this).find('.send-invite-checkbox'); 
    if ($(checkbox).is(':checked')) {
    $(checkbox).removeAttr('checked');
  } else {
    $(checkbox).prop('checked', 'checked');       
  }
   $(this).toggleClass('selected-element');
  return false;
})

演示：

http://jsfiddle.net/4ywmLr3u/1/

【讨论】：