Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Изменение цвета фона при активном checkbox_e (https://javascript.ru/forum/dom-window/65332-izmenenie-cveta-fona-pri-aktivnom-checkbox_e.html)

MixPetrov 12.10.2016 20:50
Изменение цвета фона при активном checkbox_e
 
Доброго!

Имеется таблица в виде прайс листа (картинка, название, ..., checkbox).
checkbox выводиться <div class="multicart">, соответственно картинка, название аналогично выводится через <div>

Как правильно сделать чтоб при активации чекбокса его содержащая ячейка меняла цвет фона.

Было сделано вот так (код взят с форума): 
<style type="text/css">
   .mon {
   background: green;
}
</style>



<script type="text/javascript">
   $('.multicart').ready(function(){
   $('input').click(function(){
   $(this).parent().toggleClass('mon');
   });
})
</script>

работает, но меняет фон абсолютно всем чекбоксам на странице.

рони 12.10.2016 20:56
MixPetrov,
html где?
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Aetae 12.10.2016 21:39 
$('input')
-> 
$('.multicart input[type="checkbox"]')

MixPetrov 12.10.2016 22:15
Aetae,
Спасибо, все работает.

MixPetrov 12.10.2016 22:17
А вот для общего развития: можно ли добавить в код изменение цвета фона не только в ячейке с чекбоксом, но и в других?

Aetae 12.10.2016 22:22
*задумчиво смотрит на расклад куриных потрохов* 
$('.multicart input[type="checkbox"]')
-> 
$('.multicart')


$(this).parent().toggleClass('mon');
-> 
$(this).toggleClass('mon');

Но вообще непонятно, что подразумевается под "другими", кто знает какая там у вас структура.

MixPetrov 12.10.2016 22:38
Структура таблицы такая: каждая ячейка строки в таблице формируется <div классом>.

<div class="multicart"> - содержится чекбокс
<div class="model"> и тд.


В вышеприведенном скрипте фон меняется в ячейке формируемой <div class="multicart">, а вот можно ли за одно поменять фон и <div class="model">, <div class="name"> и т.д.

Извиняюсь если не совсем четко объясняю

рони 12.10.2016 23:16
Цитата:
Сообщение от MixPetrov
Структура таблицы такая
Цитата:
Сообщение от Aetae
*задумчиво смотрит на расклад куриных потрохов*
Цитата:
Сообщение от рони
MixPetrov,
html где?
Пожалуйста, отформатируйте свой код!
:(

Aetae 12.10.2016 23:19 
$('.multicart, .model, .name')
А вообще используйте мозг. Догадаться как и что делать можно вообще не зная никакого программирования: логики и гугла достаточно.

рони 12.10.2016 23:20
MixPetrov,
так сложно показать?
<div class="multicart">
    <input type="checkbox">
    <div class="model"></div>
</div>

MixPetrov 13.10.2016 07:51
Нет абсолютно не сложно, вот код
<div class="product-list">
 <!-- шапка таблицы строка-->
		<div class="cat-head">
	<div class="image head">Изображение</div>
	<div class="name head">Наименование</div>
	<div class="attribute head">Характеристики</div>
	<div class="options head">Доп. опции</div>		
	<div class="price_constant head">Цена</div>	
	<div class="price head">Сумма</div>	
	<div class="quantity_cart head">Кол-во</div>
	<div class="cart head"></div>	
	<div class="multicart head"><input type="checkbox" value="" /></div>	
</div>

<div>		
 <!-- тело таблицы строка-->
	<div class="image"><span ><img src=".png" alt=""/></span>
		<a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
	<div class="description">..</div>
	<div class="attribute">..</div>
	<div class="options">..</div>
	<div class="quantity_cart">
		<span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
		<input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
		<span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
	</div>
	<div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
	<div class="multicart"><input type="checkbox"  value="..." /></div>
	<div class="cart">
        <input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
    </div>
</div>
<div>
 <!-- тело таблицы строка 2-->
	<div class="image"><span ><img src=".png" alt=""/></span>
	<a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
	<div class="description">..</div>
	<div class="attribute">..</div>
	<div class="options">..</div>
	<div class="quantity_cart">
		<span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
		<input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
		<span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
	</div>
	<div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
	<div class="multicart"><input type="checkbox"  value="..." /></div>
	<div class="cart">
        <input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
     </div>
</div>        
		<!-- тело таблицы строка 3 и т.д -->

рони 13.10.2016 08:19
MixPetrov,
так и не понял у каких элементов вы хотите менять класс ... вариант пальцем в небо
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .mon {
  background: green;
}
</style>

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

  <script>
$(function() {
$('.multicart input[type="checkbox"]').on('click',function() {
$(this).parent().parent().toggleClass('mon');

})
});
  </script>
</head>

<body>
<div class="product-list">
 <!-- шапка таблицы строка-->
    <div class="cat-head">
  <div class="image head">Изображение</div>
  <div class="name head">Наименование</div>
  <div class="attribute head">Характеристики</div>
  <div class="options head">Доп. опции</div>
  <div class="price_constant head">Цена</div>
  <div class="price head">Сумма</div>
  <div class="quantity_cart head">Кол-во</div>
  <div class="cart head"></div>
  <div class="multicart head"><input type="checkbox" value="" /></div>
</div>

<div>
 <!-- тело таблицы строка-->
  <div class="image"><span ><img src=".png" alt=""/></span>
    <a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
  <div class="description">..</div>
  <div class="attribute">..</div>
  <div class="options">..</div>
  <div class="quantity_cart">
    <span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
    <input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
    <span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
  </div>
  <div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
  <div class="multicart"><input type="checkbox"  value="..." /></div>
  <div class="cart">
        <input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
    </div>
</div>
<div>
 <!-- тело таблицы строка 2-->
  <div class="image"><span ><img src=".png" alt=""/></span>
  <a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
  <div class="description">..</div>
  <div class="attribute">..</div>
  <div class="options">..</div>
  <div class="quantity_cart">
    <span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
    <input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
    <span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
  </div>
  <div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
  <div class="multicart"><input type="checkbox"  value="..." /></div>
  <div class="cart">
        <input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
     </div>
</div>
    <!-- тело таблицы строка 3 и т.д -->

</body>
</html>

MixPetrov 13.10.2016 10:26
Вложений: 2
А вот для общего развития: можно ли добавить в код изменение цвета фона не только в ячейке с чекбоксом, но и в других?

И еще вопрос (не обязательно, для понимания): Общий чекбокс который активирует чекбоксы таблицы меняет фон только в своей ячейке.

рони 13.10.2016 10:44
Цитата:
Сообщение от MixPetrov
А вот для общего развития: можно ли добавить в код изменение цвета фона не только в ячейке с чекбоксом, но и в других?
это решается через css .mon .name {} и т.д.
что такое ячейка, вы по прежнему скрываите как партизан.
Цитата:
Сообщение от MixPetrov
Общий чекбокс который активирует чекбоксы таблицы
что-ж вы раньше молчали?
чтобы на первый чекбокс навесить это, неплохо бы знать где он находится, предоставленный вами html это никак не проясняет.

рони 13.10.2016 10:55
MixPetrov,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .mon .multicart{
  background: green;
}
  .mon .name{
   border: #0000FF 2px solid;
}
</style>

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

  <script>
$(function() {
var chec = $('.multicart input[type="checkbox"]'),first = chec.first();
chec = chec.not(first);
first.on('click',function() {
chec.prop({checked : !this.checked}).click()

})
chec.on('click',function() {
$(this).parent().parent().toggleClass('mon',this.checked);

})
});
  </script>
</head>

<body>
<div class="product-list">
 <!-- шапка таблицы строка-->
    <div class="cat-head">
  <div class="image head">Изображение</div>
  <div class="name head">Наименование</div>
  <div class="attribute head">Характеристики</div>
  <div class="options head">Доп. опции</div>
  <div class="price_constant head">Цена</div>
  <div class="price head">Сумма</div>
  <div class="quantity_cart head">Кол-во</div>
  <div class="cart head"></div>
  <div class="multicart head"><input type="checkbox" value="" /></div>
</div>

<div>
 <!-- тело таблицы строка-->
  <div class="image"><span ><img src=".png" alt=""/></span>
    <a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
  <div class="description">..</div>
  <div class="attribute">..</div>
  <div class="options">..</div>
  <div class="quantity_cart">
    <span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
    <input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
    <span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
  </div>
  <div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
  <div class="multicart"><input type="checkbox"  value="..." /></div>
  <div class="cart">
        <input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
    </div>
</div>
<div>
 <!-- тело таблицы строка 2-->
  <div class="image"><span ><img src=".png" alt=""/></span>
  <a href=".."><img src=".." title=".." alt=".." /></a></div>
    <div class="name"><a href="">..</a></div>
  <div class="description">..</div>
  <div class="attribute">..</div>
  <div class="options">..</div>
  <div class="quantity_cart">
    <span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
    <input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
    <span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
  </div>
  <div class="price_constant">
    <span class="price-old">..</span> <span class="price-new">..</span>
   	</div>
  <div class="multicart"><input type="checkbox"  value="..." /></div>
  <div class="cart">
        <input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
     </div>
</div>
    <!-- тело таблицы строка 3 и т.д -->

</body>
</html>

MixPetrov 13.10.2016 10:59
что такое ячейка, вы по прежнему скрываите как партизан.
Ячейка таблицы в заголовоке формируется:
<div class="name head">Наименование</div>


Ячейка таблицы в строке формируется:
<div class="name"><a href="">..</a></div>


чтобы на первый чекбокс навесить это, неплохо бы знать где он находится, предоставленный вами html это никак не проясняет.
<div class="multicart head"><input type="checkbox" value="" /></div>

MixPetrov 13.10.2016 11:09
На рисунке красным я выделил ячейки (кроме ячеек с чекбоксом) которые тоже б меняли цвет фона, а синим выделены ячейки для подписи их класса.

рони 13.10.2016 11:25
MixPetrov,
код в 15 посте устроил или нет?

MixPetrov 13.10.2016 11:30
Более чем, Спасибо!


Часовой пояс GMT +3, время: 13:00.