Как добавить класс css активной радиокнопке?
Здравствуйте!
Нужно выделять фон выбранного радиокнопкой способа доставки в woocommerce... Для этого хочу добавить элементу списка с активной радиокнопкой дополнительный класс css... В js совсем не силен, поэтому мучаюсь уже второй день..:( Пробовал добавлять на страницу код
<script>
$('#shipping_method').click(function() {
if (this.checked) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
</script>
но что-то не получается ничего... Помогите пожалуйста. |
Igorsrt,
сделайте полностью пример |
Цитата:
Код 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> возможно, я скрипт куда-то не туда вставляю... но пробовал уже по всякому и в разные места... (( |
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,
нет кода нет совета |
Цитата:
<?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>
|
Igorsrt,
ок но не могу помочь, php не знаю |
насколько я понимаю, с помощью php в конечном счете формируется обычная html страница с кодом, фрагмент которого приводил в начале...
Мне было интересно, может быть я сам скрипт как-то неправильно вставляю.. В любом случае, спасибо за попытку помочь. :) |
Igorsrt,
попробуйте весь код с JS поместить в echo |
| Часовой пояс GMT +3, время: 11:08. |