При выборе чекбоксов добавить класс родителю
Доброго времени, уважаемые форумчане!
Подскажите не много, совсем запутался с этими "родителями", "предками" Есть необходимость сделать чтобы при выборе каких либо чекбоксов (одного или всех) в определенном блоке, добавлялся класс к их родителю. А если чекбоксы ни один не выбран или все сняты, то класс убирается. Есть такой html
<div class="filter-wrapp"> сюда добавляем класс One
<div class="filter-content">
<ul>
<li><input type="checkbox" checked="checked"></li>
<li><input type="checkbox"></li>
</ul>
</div>
</div>
Пытаюсь по клику на чекбокс добавить класс к примеру "One" к "filter-wrapp", но ни чего не выходит и не происходит. JS
if (jQuery(.filter-wrapp .filter-content li input').is(':checked')) {
jQuery(this).parents('.filter-wrapp').prev().addClass('One');
} else {
jQuery(this).parents('.filter-wrapp').prev().removeClass('One');
}
Уже 3-ий день не могу решить данную задачку, возможно что я не правильно изначально делаю или вовсе "закавырка" просто в добавлении строки кода. |
Diiim,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.One {
border: 1px solid red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(".filter-wrapp").on("change", function() {
$(this).toggleClass("One", !!$(":checked", this).length)
}).trigger("change")
});
</script>
</head>
<body>
<div class="filter-wrapp"> сюда добавляем класс One
<div class="filter-content">
<ul>
<li><input type="checkbox" checked="checked"></li>
<li><input type="checkbox"></li>
</ul>
</div>
</div>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
.on {
color: red;
}
</style>
<script>
$(() => {
$('.filter-content').on('click', 'input', e => {
test()
})
test()
//
function test() {
const o = $('.filter-wrapp')
if (o.find('input:checked').length === 0) {
o.removeClass('on')
} else {
if (!o.hasClass('on')) o.addClass('on')
}
}
})
</script>
</head>
<body>
<div class="filter-wrapp"> сюда добавляем класс One
<div class="filter-content">
<ul>
<li><input type="checkbox" checked="checked"></li>
<li><input type="checkbox"></li>
</ul>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 03:48. |