Javascript-форум - Изменить класс родителя при input checkbox

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Изменить класс родителя при input checkbox (https://javascript.ru/forum/dom-window/52791-izmenit-klass-roditelya-pri-input-checkbox.html)

Изменить класс родителя при input checkbox

Добрый день. Как мне изменить клвсс родителя если нажали чек на инпуте? При условии, что имена и айди у всех инпутов разные. Вот пример:

<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb>
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class="">
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>

chelkaz,
:) вариант для сласстёны ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
    var s = $(".bx_filter_container");
       $(":checkbox", s).change(function() {
                  s.toggleClass("orange", this.checked);
      });});


  </script>
</head>

<body>
<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb">
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class="">
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>
</span></div></div></div></span></span></div>
</body>

</html>

Да нетушки) Так я можем) Все дело в том, что Дивов с классом - .bx_filter_container много и в каждом свои инпуты. Пример:
див сласс .bx_filter_container
инпут с чекбоксом
инпут с чекбоксом
инпут с чекбоксом
конец дива

див сласс .bx_filter_container
инпут с чекбоксом
инпут с чекбоксом
инпут с чекбоксом
конец дива

див сласс .bx_filter_container
инпут с чекбоксом
инпут с чекбоксом
инпут с чекбоксом
конец дива

А так как Вы предложили меняет только первый сласс...

Точнее этот вариант все классы меняет, а нужно только родителя в котором нажат чек...

Цитата:

Сообщение от рони (Сообщение 350027)

chelkaz,
:) вариант для сласстёны ...

Так меняет для всех классов...

Ребята, помогите пожалуйста. Нужно добавлять или менять класс родителя, у которого в инпут нажат чесбокс.

chelkaz, смена класса если выбран хотябы один checkbox

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".bx_filter_container");
       s.each(function(indx, el){
        $(":checkbox", el).click(function(event) {
        $(el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
      });

      });


});


  </script>
</head>

<body>
<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb">
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class="">
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>
</span></div></div></div></span></span></div>
<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb">
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class="">
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>  <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>
</span></div></div></div></span></span></div>
</body>

</html>

Deff,
если checkbox много ваш код выдаст неверный результат

Цитата:

Сообщение от рони (Сообщение 350038)

chelkaz, смена класса если выбран хотябы один checkbox

Большое спасибо! Вы можете если не трудно прокомментировать логику, этого решения. Оно прекрасно работает. А если например нужно изменить другой элемент у блока. Могли ьы Вы написать жтот же код с комментарием пожалуйста.

Цитата:

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

А если например нужно изменить другой элемент у блока

например?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $(".bx_filter_container");
       s.each(function(indx, el){  //перебор всех контейнеров
        $(el).on("change",":checkbox",function(event) { //установка слежения за checkbox внутри контейнера
        $(*!*"p",*/!*el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
        //смена класса элемента внутри контейнера(подчёркнутое убрать, тогда самого контейнера)
        // в зависимости  от наличия  (":checked").length
      });

      });


});


  </script>
</head>

<body>
<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb">
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class=""><p>test</p>
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>
</span></div></div></div></span></span></div>
<div class="bx_filter_container"> [B]/* Этот сласс нужно изменить если нажат checkbox */[/B]
<span class="bx_filter_container_title">
<span class="bx_filter_container_modef">
<div id="modef" class="blblblb">
<div id="id-2" class="panel-collapse collapse in" style="" aria-expanded="true">
<div class="panel-body">
<span class=""><p>test</p>
<input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
> <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>  <input id="arrFilter_1_2212294583"
   class="css-checkbox"
   type="checkbox"
   onclick="smartFilter.click(this)"
   name="arrFilter_1_2212294583"
   value="Y"
>
</span></div></div></div></span></span></div>
</body>

</html>

Цитата:

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

Deff,
если checkbox много ваш код выдаст неверный результат

:) Ну значит невнимательно читал,(думал много див с чекбоксами
Кстать, можно на ты, вродь давно друг-друга знаем.
Как вариант: добавление к атрибуту родительского див(к примеру data) +1 или -1 в зависимости от состояния текущего чекбокса при change, - далее смотреть что data>0; тогда each не нужен

Огромное спасибо! Отличный пример! Мне очень хотелось логику понять. А то я уже пробовал вычислить контейнер при фокусе и получалось черти что)

Цитата:

Сообщение от рони (Сообщение 350027)

chelkaz,
:) вариант для сласстёны ...

Добрый вечер! Возникла трудность, при перезагрузки страницы стили слетают. Я пробовал вместо клика ставить реди, но не помогает. Как сделать проверку при загрузки страницы на чекнутые инпуты? Тоесть это работает отлично:

$(function(){
		var s = $(".bx_filter_container");
		s.each(function(indx, el){
			$(":checkbox", el).click(function(event) {
				$(el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
			});

		});

А как вставить проверку не приложу ума. То есть после перезагрузки нужно проверить инпуты и те что нажаты добавить класс - orange. У меня не получается из за того, что обращаться нужно через родителя... Подскажите пожалуйста...

Как то так думаю?

$(function() {
		if ($(".css-checkbox").attr('checked') == 'checked') {
			а тут как то добавить класс
		}
	});

chelkaz,
не судьба строку 5 продублировать в строке 7

Гм) Я пробовал так - но походу недоглядел...

$(function(){
		var s = $(".bx_filter_container");
		s.each(function(indx, el){
			$(el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
		});
	});

Все работает точно) Спасибо!

chelkaz,

$(function(){
       var s = $(".bx_filter_container");
       s.each(function(indx, el){
        $(":checkbox", el).click(function(event) {
        $(el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
      });
         $(el)[($(el).has(":checked").length ? "add" : "remove")+"Class"]("orange");
      });


});