Question

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

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

但是在第二个方面，如果你点击其中一个方框，取消勾选然后再次勾选它会停止工作吗？

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

有人可以指出我错过了什么吗？

Answer 1

您不应该使用.attr来设置checked属性，而是使用.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的类，因此没有理由比您已经拥有$(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但一个不工作？

2 个答案:

示例（JSFiddle）：

请参阅this working example：