Изменение css родительского элемента checkbox, если он установлен или не установлен
-
05-07-2019 - |
Вопрос
По сути, у меня есть флажок внутри элемента td, и я хочу, чтобы он имел один цвет фона, когда флажок установлен, и другой цвет фона, когда флажок снят.Другими словами, я хочу, чтобы он подчеркивал, проверено это или нет.
Я попытался использовать то же решение, что и здесь: Событие переключения Jquery изменяет значение флажка
Но по какой-то причине я не могу заставить это работать.
$(document).ready(function(){
$("input:checkbox").change(function() {
if($(this).attr("checked") === "true") {
// CHECKED, TO WHITE
$(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"});
return;
}
//NOT CHECKED, TO GREEN
$(this).parent().css({"background" : "#b4e3ac", "-moz-border-radius" : "5px"});
});
});
Это добавляет зеленый цвет фона, но не удаляет его.И если я оставлю флажок установленным, обновлю, td снова станет белым, а после повторного нажатия на флажок, снятия с него флажка, фон td изменится на зеленый.
Я все еще новичок в этом, понятия не имею, что здесь может быть не так, и пытаюсь разобраться в этом уже несколько часов.Такая простая вещь, но просто не могу заставить ее работать.
Решение
Изменение
if($(this).attr("checked") === "true")
Для
if($(this).attr("checked") === true)
Поскольку вы сравниваете, используя strict equal, два типа данных должны быть одинаковыми.
typeof ( $(this).attr ( "checked" ) )
сообщит вам, что это из логическое значение введите, и вы сравните его со строкой.
Для получения дополнительной информации смотрите Операторы сравнения
Другие советы
Есть лучший способ проверить, установлен ли флажок:
$(this).is(':checked')
Это немного более надежно.
if ($ (this) .attr (" проверено ") === " true ")
attr
не читает атрибуты HTML. Это обманчиво. Если бы он действительно считывал атрибуты, строковое значение для checked
было бы 'checked'
, а не 'true'
. Но это не так.
На самом деле он читает свойства объектов JavaScript, используя только имена атрибутов вместо имен свойств в тех немногих местах, где они различаются. Свойство checked
дает вам логическое значение, поэтому нет необходимости сравнивать его с чем-либо, вы можете просто сказать:
if ($(this).attr('checked'))
или, что еще проще, полностью эквивалентный:
if (this.checked)
лучший из них -
if($("this").is(':checked'))
{
$(this).parent().css({"background" : "#ffffff", "-moz-border-radius" : "5px"})
}
Попробуйте изменить это:
$(this).attr("checked") === "true"
на это:
!!$(this).attr("checked") === true
Это преобразует все не-булевы значения в булевы и позволит сработать безопасному сравнению типов, даже если строка " true " возвращается (если возвращается строка false, то все равно будет иметь значение true ....)