Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2021, 13:19
Аватар для Diiim
Интересующийся
Отправить личное сообщение для Diiim Посмотреть профиль Найти все сообщения от Diiim
 
Регистрация: 07.03.2018
Сообщений: 18

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

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

Есть такой 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2021, 13:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,356

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить анимацию fadeIn при фиксации меню Tesessssss jQuery 2 12.08.2018 19:31
Новый input при выборе определенного option SLameN Элементы интерфейса 4 03.07.2015 16:29
Действие при одновременном выборе в разных выпадающих списках Oresama Элементы интерфейса 1 28.06.2015 20:22
Как добавить и удалить класс при нажатии на div? Jeick9 Events/DOM/Window 23 10.03.2015 15:05
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 19:38