复选框默认图标不会使用 jQuery 更新

Checkbox default icon doesn’t update with jQuery

本文关键字：jQuery 更新 默认 图标 复选框      更新时间：2023-09-26

我有一个简单的脚本，<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>

j查询：

$('.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"，没有一个有效...

有什么想法吗？谢谢。

使用 prop() 而不是 attr()

从文档中：

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回未定义。若要检索和更改 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;
})

演示

旁注：你也可以这样做。

你应该

改用$.prop()。

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

试试这段代码

$('.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;
});

你应该使用 .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 的范围内。源

$('.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/

相关文章：