Форум

face2005 · #1 (**permalink**) 19.12.2019, 19:13

Добрый вечер!
есть разметка:

<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

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>

face2005 · #3 (**permalink**) 20.12.2019, 08:57

спасибо.. при изменении работает.. но у меня загвоздка в том что это фильтр, когда я выбрал чекбокс, страница обновляется и Ваш скрипт уже обнуляется, но при этом выбранный чекбокс остается.. Вот мне и нужно добавить класс когда этот dataUl уже имеет выбранный чекбокс.

face2005 · #4 (**permalink**) 20.12.2019, 09:12

мой скрипт что-то не срабатывает

$('.dataUl').each(function(){   
	if ( $(this).find('input:checkbox:checked') > 0 ){
	   $( this ).addClass('activeFilter');
	}
});

ksa · #5 (**permalink**) 20.12.2019, 09:25

Сообщение от 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

рони · #6 (**permalink**) 20.12.2019, 09:27

face2005,
так и замените строки 2 - 4 на строку 17 пост#2

рони · #7 (**permalink**) 20.12.2019, 09:27

face2005,

$('.dataUl').each(function(){
   this.classList.toggle("activeFilter", this.querySelector(":checked"))
});

рони · #8 (**permalink**) 20.12.2019, 09:35

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>

face2005 · #9 (**permalink**) 20.12.2019, 10:03

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

Форум

Справочник

Discord чат

Курсы javascript