JS 触发复选框的选中属性不会动态更改答案

【问题标题】：JS triggered checkbox's checked attr doesn't dynamically changeJS 触发复选框的选中属性不会动态更改
【发布时间】：2013-11-21 15:19:07
【问题描述】：

我的问题很简单，我有一个隐藏的复选框和一个自定义的假复选框，它们会触发真正的复选框。我尝试了很多不同的方法，但click 函数只在开始时起作用，而不是在停止时起作用。

我在 stackoverflow 上搜索过类似的问题，但找不到与我类似的问题。感谢您的宝贵时间。

Here is jsFiddle.

html：

<div class="fl">
    <span class="tri_checkbox"></span>
    <input class="hidden_checkbox" type="checkbox" />
</div>

jQuery:

$(document).on('click','.tri_checkbox',function() {
  if ( !$(this).hasClass('selected') ) {
    $(this).parent().find('input.hidden_checkbox').attr('checked','checked');
    $(this).addClass('selected');
  }else{
    $(this).parent().find('input.hidden_checkbox').removeAttr('checked');
    $(this).removeClass('selected');
  }
});

【问题讨论】：

不要使用 .attr 来更改属性。它仅用于属性。
并且不要使用 removeAttr 来重置属性

标签： javascript jquery html forms checkbox

【解决方案1】：

需要使用.prop()来设置checked属性

$(document).on('click', '.tri_checkbox', function () {
    $(this).next().prop('checked', function (_, checked) {
        return !checked;
    });
    $(this).toggleClass('selected');
});

演示：Fiddle

您可以在此处使用 .next()，因为跨度和输入是同级的
使用 toggleClass() 更改类

阅读：Attributes vs. Properties

【讨论】：

【解决方案2】：

缩短你的代码并试试这个：

$(this).toggleClass("selected");
$(this).parent(".fl").find(":checkbox").prop("checked", $(this).hasClass("selected"));

演示：http://jsfiddle.net/CVWWn/4/

或者只使用一个大链：

$(this).toggleClass("selected").parent(".fl").find(":checkbox").prop("checked", $(this).hasClass("selected"));

大链：http://jsfiddle.net/CVWWn/5/

【讨论】：

【解决方案3】：

不要使用 if (!hasClass) {} else {}，让它在正确的逻辑中第一名！ :)
.parent().find() = 兄弟姐妹()
使用 .prop()

$(document).on('click','.tri_checkbox',function() {
          if ( $(this).hasClass('selected') ) {
            $(this).siblings('input.hidden_checkbox').prop('checked', false);
            $(this).removeClass('selected');
          }
        else {
            $(this).siblings('input.hidden_checkbox').prop('checked', 'checked');
            $(this).addClass('selected');
          }
    });

fiddle

【讨论】：