Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2019, 19:13
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 100

добавить класc при выбраном чекбоксе
Добрый вечер!
есть разметка:
<ul>
<li class="sf-field-taxonomy-height"
   <h4>Рост</h4>
		<ul class="dataUl">			
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="vysokogo-rosta" name="_sft_height[]">
               <label class="sf-label-checkbox">Высокого роста</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="niz-rosta" name="_sft_height[]">
               <label class="sf-label-checkbox">Низкого роста</label>
           </li>
		</ul>
</li>

<li class="sf-field-taxonomy-height"
   <h4>Возраст</h4>
		<ul class="dataUl">			
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="stariy" name="_sft_age[]">
               <label class="sf-label-checkbox">Старый</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="molodoy" name="_sft_age[]">
               <label class="sf-label-checkbox">Молодой</label>
           </li>
		</ul>
</li>
</ul>


подскажите как добавить класс active списку class="dataUl" если включен чекбокс внутри него?
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2019, 20:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

face2005,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .active{
       background-color: #FF00FF;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
   $(".dataUl").on("change", function() {
   this.classList.toggle("active", this.querySelector(":checked"))
})
});
  </script>
</head>
<body>
<ul>
<li class="sf-field-taxonomy-height">
   <h4>Рост</h4>
		<ul class="dataUl">
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="vysokogo-rosta" name="_sft_height[]">
               <label class="sf-label-checkbox">Высокого роста</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="niz-rosta" name="_sft_height[]">
               <label class="sf-label-checkbox">Низкого роста</label>
           </li>
		</ul>
</li>

<li class="sf-field-taxonomy-height">
   <h4>Возраст</h4>
		<ul class="dataUl">
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="stariy" name="_sft_age[]">
               <label class="sf-label-checkbox">Старый</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="molodoy" name="_sft_age[]">
               <label class="sf-label-checkbox">Молодой</label>
           </li>
		</ul>
</li>
</ul>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 20.12.2019, 08:57
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 100

спасибо.. при изменении работает.. но у меня загвоздка в том что это фильтр, когда я выбрал чекбокс, страница обновляется и Ваш скрипт уже обнуляется, но при этом выбранный чекбокс остается.. Вот мне и нужно добавить класс когда этот dataUl уже имеет выбранный чекбокс.
Ответить с цитированием
  #4 (permalink)  
Старый 20.12.2019, 09:12
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 100

мой скрипт что-то не срабатывает
$('.dataUl').each(function(){   
	if ( $(this).find('input:checkbox:checked') > 0 ){
	   $( this ).addClass('activeFilter');
	}
});
Ответить с цитированием
  #5 (permalink)  
Старый 20.12.2019, 09:25
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,711

Сообщение от face2005 Посмотреть сообщение
$('.dataUl').each(function(){   
	if ( $(this).find('input:checkbox:checked') > 0 ){
	   $( this ).addClass('activeFilter');
	}
});
Это все можно записать немного короче
$('.dataUl input:checkbox:checked').each(function(){   
      $( this ).closest('.dataUl').addClass('activeFilter');
});


Что ты ожидаешь от своего условия?
$(this).find('input:checkbox:checked') > 0


Последний раз редактировалось ksa, 20.12.2019 в 09:29.
Ответить с цитированием
  #6 (permalink)  
Старый 20.12.2019, 09:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

face2005,
так и замените строки 2 - 4 на строку 17 пост#2
Ответить с цитированием
  #7 (permalink)  
Старый 20.12.2019, 09:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

face2005,
$('.dataUl').each(function(){
   this.classList.toggle("activeFilter", this.querySelector(":checked"))
});
Ответить с цитированием
  #8 (permalink)  
Старый 20.12.2019, 09:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,578

face2005,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .activeFilter{
       background-color: #FF00FF;
    }

  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".dataUl").forEach(function(el){
   el.classList.toggle("activeFilter", !!el.querySelector(":checked"))
});
});
  </script>
</head>
<body>
<ul>
<li class="sf-field-taxonomy-height">
   <h4>Рост</h4>
		<ul class="dataUl">
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="vysokogo-rosta" name="_sft_height[]" checked="checked">
               <label class="sf-label-checkbox">Высокого роста</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="niz-rosta" name="_sft_height[]">
               <label class="sf-label-checkbox">Низкого роста</label>
           </li>
		</ul>
</li>

<li class="sf-field-taxonomy-height">
   <h4>Возраст</h4>
		<ul class="dataUl">
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="stariy" name="_sft_age[]">
               <label class="sf-label-checkbox">Старый</label>
           </li>
			<li class="sf-option">
               <input class="sf-input-checkbox" type="checkbox" value="molodoy" name="_sft_age[]">
               <label class="sf-label-checkbox">Молодой</label>
           </li>
		</ul>
</li>
</ul>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 20.12.2019, 10:03
Кандидат Javascript-наук
Отправить личное сообщение для face2005 Посмотреть профиль Найти все сообщения от face2005
 
Регистрация: 04.04.2014
Сообщений: 100

всем спасибо! Вы крутые парни, респект!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
getAllResponseHeaders() и status имеют смысл только при readyState==4? mister_maxim AJAX и COMET 7 27.03.2011 19:08
textarea. При нажатии enter, добавить bb-code [br]. Как? javasc Events/DOM/Window 1 22.01.2011 09:43
Изменение стиля родительского элемента при :hover дочернего lanzs Элементы интерфейса 2 16.10.2010 13:28
Как скопировать елемент при активном чекбоксе? Zema jQuery 5 16.08.2010 11:32
Применение стиля для родителя при выбраном чекбоксе house.wm jQuery 6 22.04.2010 11:35