完全一样 javascript 但有一个不工作？

Question

我想创建一个清单，在用户勾选框时移动滑块。我找到了以下两段代码：

$(document).on('click', '.checkBoxLeft', function () {
  if ($(this).find('input[type="checkbox"]').is(':checked')) {
    $(this).removeClass('checked').addClass('not-checked');
    $(this).find('input[type="checkbox"]').attr('checked', false);
  } else {
    $(this).removeClass('not-checked').addClass('checked');
    $(this).find('input[type="checkbox"]').attr('checked', true);
  }
});

然后我发现这更像是我想做的，并且基于第一个： http://jsfiddle.net/ezanker/UznQe/

但是在第二个上，如果您单击其中一个框，取消选中它然后再次选中它就停止工作了吗？

据我所知，这是因为上面的那段代码。我已经注释掉了一些东西并将它们四处移动以查看首先运行的是什么，我尝试用第一个替换第二个 fiddle 的部分，据我所知 html 之间的唯一区别/ css 是第二个在复选框上有一个值字段，但编辑它没有任何效果。

有人能指出我遗漏了什么吗？

Answer 1

您不应该改用 .attr to set the checked property, use .prop。 .attr 用于设置元素的属性，.prop 用于设置属性。

示例 (JSFiddle):

if ($(this).find('input[type="checkbox"]').is(':checked')) {
    $(this).removeClass('checked').addClass('not-checked');
    $(this).find('input[type="checkbox"]').prop('checked', false);
} else {
    $(this).removeClass('not-checked').addClass('checked');
    $(this).find('input[type="checkbox"]').prop('checked', true);
}

Answer 2

您应该使用 .prop，但对于检查本身，我只使用 .hasClass()

由于代码已经为点击的元素提供了 checked 的 class，因此没有理由比您已经拥有的点击元素 $(this) 更深入地查看。

参见this working example：

    $(document).on('click', '.checkBoxLeft', function () {
        if ($(this).hasClass('checked')) { // here use `.hasClass()` for the check 
            $(this).removeClass('checked').addClass('not-checked');
            $(this).find('input[type="checkbox"]').prop('checked', false);
        } else {
            $(this).removeClass('not-checked').addClass('checked');
            $(this).find('input[type="checkbox"]').prop('checked', true);
        }

        //  .....


    });

完全一样 javascript 但有一个不工作？

Exactly the same javascript but one isn't working?

html

javascript

checkbox

jquery

示例 (JSFiddle):

参见this working example：