Форум

Igorsrt · #21 (**permalink**) 21.02.2016, 19:17

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

??? что такое элемент списка и откуда взялся класс "checked".

элемент списка:

<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate">Доставка1</label><div style="float:right;">300 руб.</div></li>

класс "checked":

$(this).addClass('selected');

извиняюсь не "checked" а "selected"

рони · #22 (**permalink**) 21.02.2016, 19:32

Igorsrt,
может вы это хотели?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .selected {
          background-color: #FF00FF;
     }

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

  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('li.shipping_method').each(function(indx, element){
         if ($('input',this)[0].checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });


}).filter(":checked").click();

   })
  </script>
</head>

<body>
<ul>
  <li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate">Доставка1</label><div style="float:right;">300 руб.</div></li>
<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_delivery" value="local_delivery" class="shipping_method"><label for="shipping_method_0_local_delivery">Доставка2</label><div style="float:right;">500 руб.</div></li>

</ul>
</body>

</html>

Igorsrt · #23 (**permalink**) 21.02.2016, 19:41

Ух ты, кажется заработало... спасибо )))

Igorsrt · #24 (**permalink**) 21.02.2016, 19:44

и еще один вопрос. Если я хочу на этой же странице так же выделять еще один чекбокс (оплату) с классом wc_payment_methods, мне нужно новый скрипт писать или в этот же можно вставить?

Igorsrt · #25 (**permalink**) 21.02.2016, 20:00

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

Igorsrt,
может вы это хотели?

<!DOCTYPE HTML>
  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('li.shipping_method').each(function(indx, element){
         if ($('input',this)[0].checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });


}).filter(":checked").click();

   })
  </script>
</html>

Можно в эту функцию еще один класс чекбоксов дописать (wc_payment_method), что бы к ним тоже 'selected' добавлялось?

рони · #26 (**permalink**) 21.02.2016, 20:33

Igorsrt,
учитесь делать лаконичные макеты и чётко формулировать ... ваши два поста выше не осилил.

Igorsrt · #27 (**permalink**) 21.02.2016, 20:46

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

Igorsrt,
учитесь делать лаконичные макеты и чётко формулировать ... ваши два поста выше не осилил.

у меня есть еще один блок с чекбоксами:

<h3>Способ оплаты</h3>
<ul class="wc_payment_methods payment_methods methods">
			<li class="wc_payment_method payment_method_cod">
	<input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="">

	<label for="payment_method_cod">
		Наличными курьеру при получении заказа 	</label>
			<div class="payment_method_desc">
			<p>Оплата производится курьеру в момент доставки товара.</p>
		</div>
	</li>
<li class="wc_payment_method payment_method_cheque">
	<input id="payment_method_cheque" type="radio" class="input-radio" name="payment_method" value="cheque" data-order_button_text="">

	<label for="payment_method_cheque">
		Альтернативный способ оплаты 	</label>
			<div class="payment_method_desc">
			<p>Мы готовы предложить Вам другие способы оплаты заказа.</p>
		</div>
	</li>
		</ul>

Нужно сделать то же самое, т.е. присвоить активному элементу <li> дополнительный класс 'selected'... Думал сделать по аналогии с Вашим первым вариантом, но что-то не получается опять (возможно куда-то не туда вставляю или ошибка в самом коде у меня)... Не могли бы Вы еще для этого варианта прописать скрипт?

рони · #28 (**permalink**) 21.02.2016, 21:52

Igorsrt, checked в input добавьте если нужно

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .selected {
          background-color: #FF00FF;
     }

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

  <script>
   $(function(){
       $('li').click(function() {

    $(this).siblings().add(this).each(function(indx, el){
         if ($('input',el)[0].checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });


})
$("li input:checked").parent().click();

   })
  </script>
</head>

<body>
<ul>
  <li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate">Доставка1</label><div style="float:right;">300 руб.</div></li>
<li class="shipping_method">
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_delivery" value="local_delivery" class="shipping_method"><label for="shipping_method_0_local_delivery">Доставка2</label><div style="float:right;">500 руб.</div></li>

</ul>

<h3>Способ оплаты</h3>
<ul class="wc_payment_methods payment_methods methods">
			<li class="wc_payment_method payment_method_cod">
	<input id="payment_method_cod" type="radio" class="input-radio" name="payment_method" value="cod" data-order_button_text="">

	<label for="payment_method_cod">
		Наличными курьеру при получении заказа 	</label>
			<div class="payment_method_desc">
			<p>Оплата производится курьеру в момент доставки товара.</p>
		</div>
	</li>
<li class="wc_payment_method payment_method_cheque">
	<input id="payment_method_cheque" type="radio" class="input-radio" name="payment_method" value="cheque" data-order_button_text="">

	<label for="payment_method_cheque">
		Альтернативный способ оплаты 	</label>
			<div class="payment_method_desc">
			<p>Мы готовы предложить Вам другие способы оплаты заказа.</p>
		</div>
	</li>
		</ul>

</body>

</html>

Igorsrt · #29 (**permalink**) 21.02.2016, 22:04

да, спасибо огромное - все заработало наконец-то... )))

Форум

Справочник

Discord чат

Курсы javascript