Question

我的问题很简单，我有一个隐藏的复选框和一个自定义假复选框，触发真正的复选框。我已经尝试了很多种方法，但click函数只能在开头而不是停止。

我已经在stackoverflow上搜索了类似的问题，但是找不到类似于我的问题。谢谢你的时间。

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

演示：Fiddle

你可以在这里使用.next（），因为span和输入是兄弟姐妹
使用toggleClass（）更改类

阅读：Attributes vs. Properties

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（）= siblings（）
使用.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

JS触发复选框的已检查attr不会动态更改

3 个答案: