Question

我正在尝试在此处单击添加/删除一个类，但是toggleClass不能正常工作，因为我期待它。相反，addClass工作正常，但我需要它在第二次单击时删除该类。

$('.label1').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');
    $(this).toggleClass('checked');
    $checkItem.prop("checked", !$checkItem.prop("checked"));
})

$('.label2').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');
    $(this).addClass('checked');
    $checkItem.prop("checked", !$checkItem.prop("checked"));
})

你能告诉我我做错了什么吗？

在此处查看此操作：Test jquery。

谢谢！

Answer 1

您可以通过挂钩复选框的change事件来避免此问题并简化逻辑。然后，您可以根据checked属性的状态在父label上设置checked类。

在复选框上使用change而不是click对于满足辅助功能标准也要好得多，因为它允许使用键盘导航的用户在UI中触发相同的效果。试试这个：

＆＃13;

$(':checkbox').on('change', function() {
  $(this).closest('label').toggleClass('checked', this.checked)
});

＆＃13;

.checked {
  border: 2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="checkbox">
    <label class="label1">
      <input type="checkbox">
      Check me out
    </label>
  </div>
  <div class="checkbox">
    <label class="label2">
      <input type="checkbox">
      Check me out
    </label>
  </div>
</form>

＆＃13;

Answer 2

你可以这样做。

试试这个例子希望它能帮到你。

$('.label1').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');

    $(this).toggleClass('checked');
    if($(this).hasClass('checked')) {
       $checkItem.prop("checked", true);
    } else {
        $checkItem.prop("checked", false);
    }
  })

  $('.label2').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');

   
    if($(this).hasClass('checked')) {
       $checkItem.prop("checked", false);
        $(this).removeClass('checked');
    } else {
       $(this).addClass('checked');
        $checkItem.prop("checked", true);
    }
  })

.checked {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="checkbox">
    <label class="label1">
      <input type="checkbox">
      Check me out
    </label>
  </div>
  <div class="checkbox">
    <label class="label2">
      <input type="checkbox">
      Check me out
    </label>
  </div>
</form>

Answer 3

复选框位于您的标签内，因此当点击它时，它也会点击复选框。

  $('.label1, .label2').on('change', function() {
    $(this).toggleClass('checked');
  })

https://codepen.io/ankurace/pen/OgoQLG

Answer 4

这是一个紧凑的解决方案

group 1 -> group 2

新复选框对象，

如果你没有效果

$('input[type=checkbox].BorderRed').change(function() {
      $($(this).parent()).toggleClass('checked');
});

如果你不这样做

  <div class="checkbox">
    <label class="label2">
      <input class="BorderRed" type="checkbox">
      Check me out
    </label>
  </div>

为什么toggleClass不在这里工作？

4 个答案: