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

Question

我的问题确实很简单，我有一个隐藏的复选框和一个触发真实复选框的自定义假复选框。 我尝试了多种方法，但click功能仅在开始而不是停止时起作用。

我已经对stackoverflow提出了类似的问题，但是找不到与我类似的问题。 感谢您的时间。

这是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');
  }
});

Answer 1

您需要使用.prop（）设置选中的属性

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

演示： 小提琴

1. 您可以在此处使用.next（），因为span和input是同级
2. 使用toggleClass（）更改类

阅读： 属性与属性

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

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

小提琴