jquery - AddClass和RemoveClass在浏览器上的行为不同

Question

嗨，我已经看过很多次了。类似的问题还有很多，但找不到我的答案。

我有两个复选框，如下所示:

<div class="custom-chk">
  <label>
    <input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
    Residential
  </label>
</div>
<div class="custom-chk">
 <label>
   <input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
   Commercial
 </label>
</div>

我通过以下方式选中/取消选中:(如果一个选中另一个则取消选中)

$('.upsfilter').on('click', function (e) {
 if ($(this).prop('checked')) {
 $('.upsfilter').prop('checked', false);
 $('.upsfilter').parent().removeClass('checked');
 $(this).prop('checked', true);
 $(this).parent().addClass('checked');
 }
)};

$('.upsfilter').on('click', function(e) {
    if ($(this).prop('checked')) {
      $('.upsfilter').prop('checked', false);
      $('.upsfilter').parent().removeClass('checked');
      $(this).prop('checked', true);
      $(this).parent().addClass('checked');
    }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
  <label>
        <input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
        Residential
      </label>
</div>
<div class="custom-chk">
  <label>
       <input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
       Commercial
     </label>
</div>

label class="checked" 显示复选框中的小自定义方 block 。

使用上面的代码:

a) 火狐、Chrome。选中/取消选中有效，但 label class="checked" 的作用相反。 (勾选为 false 时显示方 block )

b) IE 11 运行良好

但是如果我删除 $(this).parent().addClass('checked');

Firefox 和 Chrome 工作正常，但 IE 也能做同样的事情 (a)

与 IE、Chrome 或 Firefox 是否存在兼容性问题？ IE react 更有意义。任何帮助将不胜感激。

谢谢。

Answer 1

您可以使用附加事件的目标，然后切换类。重新阅读后，我发现您想要带有类的 label 所以我调整了它>

此外，您需要使用 change 事件，因为并非所有更改它的操作都是点击。

$('.custom-chk').on('change', '.upsfilter', function(event) {
  let me = $(this);
  let isChecked = me.prop("checked");
  let checks = $('.upsfilter');
  checks.not(me).prop('checked', false);
  checks.closest('label')
    .toggleClass('checked', false);
  checks.filter(':checked').closest('label')
    .toggleClass('checked', true);
});

.checked {
  border: solid red 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="custom-chk">
  <label>
    <input name="Residential" id="Residential" class="upsfilter" type="checkbox" />
    Residential
  </label>
</div>
<div class="custom-chk">
  <label>
   <input name="Commercial" id="Commercial" class="upsfilter" type="checkbox" />
   Commercial
 </label>
</div>