AddClass RemoveClass действует по-разному в браузерах
Привет, я просмотрел ТАК много. Подобных вопросов много, но ответа не нашел.
У меня есть два флажка следующим образом:
<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" показывает маленький пользовательский квадрат в флажке.
С кодами выше:
а) Фаерфокс, Хром. Check/Uncheck работает, но класс ярлыка = "проверено" работает наоборот. (отображение квадрата при проверке является ложным)
б) IE 11 работает нормально
Но если я удалю $(this).parent().addClass('checked');
Firefox и Chrome работают нормально, но IE делает то же самое (а)
Есть ли проблема совместимости с IE, Chrome или Firefox? Реакция IE имеет больше смысла. Любая помощь будет оценена по достоинству.
Спасибо.
@MarkSchultheiss Какая часть?
Запустите фрагмент, в который я вставил код, см. ошибку
О да. Починил это. Спасибо.
Ответы 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>Это не удаляет класс, если он проверен UN
Ну, если я запущу это, нажмите, чтобы проверить, что он станет красным, если я сниму флажок, он останется красным
Вы можете использовать цель, к которой привязано событие, а затем переключать классы.
После повторного прочтения я вижу, что вы хотите 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>«Я отмечаю/снимаю отметку со следующим: (если один отметит другой, снимите отметку)» четко указано, что если один отмечен, то другой должен быть снят.
Странный. Теперь с этим firefox, chrome и IE все делают наоборот.
Я тестировал в Chrome и Fox, они оба делают то же самое, при проверке они имеют красную рамку, когда нет, их нет. Отметьте другой, он снимает отметку и отменяет границы предыдущего отмеченного.
Я предполагаю, что ваша проблема с опечаткой/синтаксисом JavaScript - это просто проблема с копированием/вставкой?