Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице

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 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, время: 12:37.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице