Форум

chelkaz · #1 (**permalink**) 07.01.2015, 09:44

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

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

рони · #2 (**permalink**) 07.01.2015, 10:04

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>

chelkaz · #3 (**permalink**) 07.01.2015, 10:39

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

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

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

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

chelkaz · #4 (**permalink**) 07.01.2015, 10:44

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

chelkaz · #5 (**permalink**) 07.01.2015, 10:44

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

chelkaz,

вариант для сласстёны ...

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

chelkaz · #6 (**permalink**) 07.01.2015, 11:02

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

рони · #7 (**permalink**) 07.01.2015, 11:05

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>

рони · #8 (**permalink**) 07.01.2015, 11:27

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

chelkaz · #9 (**permalink**) 07.01.2015, 11:47

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

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

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

рони · #10 (**permalink**) 07.01.2015, 11:58

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

Форум

Справочник

Discord чат

Курсы javascript