AddClass RemoveClass在浏览器上的作用不同

Posted 2021-04-13

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

我有两个复选框如下：

<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"在复选框中显示小自定义方块。

打上上面的代码：

a）Firefox，Chrome。选中/取消选中有效但标签class =“checked”正在相反。 （选中时显示正方形为假）

b）IE 11工作正常

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

Firefox和Chrome工作正常，但IE做同样的事情（一）

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

谢谢。

答案

您可以使用附加事件的目标，然后切换类。重新阅读之后，我看到你想要课堂上的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>

另一答案

我使用is(':checked')检查是否选中了复选框，并使用closest('.custom-chk').siblings().find('.upsfilter')查找复选框的下一个和上一个复选框。希望这是你要找的，谢谢

$('.upsfilter').click(function(e){
if($(this).is(':checked'))
 {
   $(this).parent().addClass('checked');         //Adding class to current checkbox
   var check =$(this).closest('.custom-chk').siblings().find('.upsfilter')
   check.prop('checked',false)
   check.parent().removeClass('checked')        //Removes class of other checkbox
 
 }
 else
  $(this).parent().removeClass('checked');  

})

.checked
{
 color:red

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>

以上是关于AddClass RemoveClass在浏览器上的作用不同的主要内容，如果未能解决你的问题，请参考以下文章

jQuery的属性与样式之增加样式.addClass(),删除样式.removeClass()

jQuery的addClass,removeClass和toggleClass方法

jQuery学习笔记 .addClass()/.removeClass()简单学习

在 Jquery 中动画 addClass 和 removeClass

封装addClass removeClass

追加addclass和removeclass