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" показывает маленький пользовательский квадрат в флажке.

С кодами выше:

а) Firefox, Chrome. Проверка / снятие отметки работает, но label class = "флажок" работает наоборот. (показывает квадратик, если установлен флажок false)

б) IE 11 работает нормально

Но если я уберу $(this).parent().addClass('checked');

Firefox и Chrome работают нормально, но IE делает то же самое (а)

Есть ли проблема совместимости с IE, Chrome или Firefox? IE реакция имеет больше смысла. Любая помощь будет оценена.

Спасибо.

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>

Answer 2

Я использовал 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>