Question

我有一个简单的脚本，在<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"，没有工作......

有什么想法吗？感谢。

Answer 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那样做。

Answer 2

您应该使用$.prop()代替。

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

Answer 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;
});

Answer 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

Answer 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/

Checkbox默认图标不会使用jQuery更新

5 个答案: