Форум

Diiim · #1 (**permalink**) 22.09.2021, 13:19

Доброго времени, уважаемые форумчане!
Подскажите не много, совсем запутался с этими "родителями", "предками"

Есть необходимость сделать чтобы при выборе каких либо чекбоксов (одного или всех) в определенном блоке, добавлялся класс к их родителю. А если чекбоксы ни один не выбран или все сняты, то класс убирается.

Есть такой 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-ий день не могу решить данную задачку, возможно что я не правильно изначально делаю или вовсе "закавырка" просто в добавлении строки кода.

рони · #2 (**permalink**) 22.09.2021, 13:34

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>

ksa · #3 (**permalink**) 22.09.2021, 13:44

Сообщение от Diiim

Уже 3-ий день не могу решить данную задачку

Как вариант...

<!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>

Форум

Справочник

Discord чат

Курсы javascript