Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как добавить класс css активной радиокнопке? (https://javascript.ru/forum/dom-window/61508-kak-dobavit-klass-css-aktivnojj-radioknopke.html)

Igorsrt 21.02.2016 14:46

Как добавить класс css активной радиокнопке?
 
Здравствуйте!
Нужно выделять фон выбранного радиокнопкой способа доставки в woocommerce... Для этого хочу добавить элементу списка с активной радиокнопкой дополнительный класс css... В js совсем не силен, поэтому мучаюсь уже второй день..:(
Пробовал добавлять на страницу код
<script>
$('#shipping_method').click(function() {
    if (this.checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }
});
</script>

но что-то не получается ничего...
Помогите пожалуйста.

рони 21.02.2016 14:51

Igorsrt,
сделайте полностью пример

Igorsrt 21.02.2016 15:10

Цитата:

Сообщение от рони (Сообщение 408690)
Igorsrt,
сделайте полностью пример

сайт на wordpress + woocommerce
Код html в фаербаге примерно такой получается:
<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 руб.</a></div></li>

возможно, я скрипт куда-то не туда вставляю... но пробовал уже по всякому и в разные места... ((

рони 21.02.2016 16:00

Igorsrt,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .selected {
         width: 50px;
     }

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

  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('input.shipping_method').each(function(indx, element){
         if (this.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 21.02.2016 16:26

Спасибо!
но почему-то тоже не работает у меня... что же я делаю не так...

рони 21.02.2016 17:03

Igorsrt,
нет кода нет совета

Igorsrt 21.02.2016 17:32

Цитата:

Сообщение от рони (Сообщение 408708)
Igorsrt,
нет кода нет совета

Я вот так вставлял Ваш код скрипта в файл form-checkout.php (в самый конец):
<?php
/**
 * Checkout Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-checkout.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you (the theme developer).
 * will need to copy the new files to your theme to maintain compatibility. We try to do this.
 * as little as possible, but it does happen. When this occurs the version of the template file will.
 * be bumped and the readme will list any important changes.
 *
 * @see 	    http://docs.woothemes.com/document/template-structure/
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

wc_print_notices();

do_action( 'woocommerce_before_checkout_form', $checkout );

// If checkout registration is disabled and not logged in, the user cannot checkout
if ( ! $checkout->enable_signup && ! $checkout->enable_guest_checkout && ! is_user_logged_in() ) {
	echo apply_filters( 'woocommerce_checkout_must_be_logged_in_message', __( 'You must be logged in to checkout.', 'woocommerce' ) );
	return;
}

?>
					
<h3>Способ доставки</h3>

<form name="checkout" method="post" class="checkout woocommerce-checkout" action="<?php echo esc_url( wc_get_checkout_url() ); ?>" enctype="multipart/form-data">

	<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

	<div id="order_review" class="woocommerce-checkout-review-order">
		<?php do_action( 'woocommerce_checkout_order_review' ); ?>
	</div>

	<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>


	<?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>

		<?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

		<div class="" id="customer_details">
			<?php do_action( 'woocommerce_checkout_billing' ); ?>

			<?php do_action( 'woocommerce_checkout_shipping' ); ?>
		</div>

		<div class="form-row place-order">
			<noscript>
				<?php _e( 'Since your browser does not support JavaScript, or it is disabled, please ensure you click the <em>Update Totals</em> button before placing your order. You may be charged more than the amount stated above if you fail to do so.', 'woocommerce' ); ?>
				<br/><input type="submit" class="button alt" name="woocommerce_checkout_update_totals" value="<?php esc_attr_e( 'Update totals', 'woocommerce' ); ?>" />
			</noscript>

			<?php wc_get_template( 'checkout/terms.php' ); ?>

			<?php do_action( 'woocommerce_review_order_before_submit' ); ?>

			<?php echo apply_filters( 'woocommerce_order_button_html', '<input type="submit" class="woo-order-button" name="woocommerce_checkout_place_order" id="place_order" value="Отправить" data-value="Отправить" />' ); ?>

			<?php do_action( 'woocommerce_review_order_after_submit' ); ?>

			<?php wp_nonce_field( 'woocommerce-process_checkout' ); ?>
		</div>

		<?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

	<?php endif; ?>

</form>

<?php do_action( 'woocommerce_after_checkout_form', $checkout ); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
       $('input.shipping_method').click(function() {
    $('input.shipping_method').each(function(indx, element){
         if (this.checked) {
        $(this).addClass('selected');
    } else {
        $(this).removeClass('selected');
    }  });
}).filter(":checked").click();
   })
  </script>

рони 21.02.2016 17:46

Igorsrt,
ок но не могу помочь, php не знаю

Igorsrt 21.02.2016 17:53

насколько я понимаю, с помощью php в конечном счете формируется обычная html страница с кодом, фрагмент которого приводил в начале...
Мне было интересно, может быть я сам скрипт как-то неправильно вставляю..
В любом случае, спасибо за попытку помочь. :)

destus 21.02.2016 18:08

Igorsrt,
попробуйте весь код с JS поместить в echo


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