Javascript-форум - выбирая радиокнопку чекед нажатой и чекед для радио в соседнем блоке

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - выбирая радиокнопку чекед нажатой и чекед для радио в соседнем блоке (https://javascript.ru/forum/css-html/75707-vybiraya-radioknopku-cheked-nazhatojj-i-cheked-dlya-radio-v-sosednem-bloke.html)

выбирая радиокнопку чекед нажатой и чекед для радио в соседнем блоке

есть блок

<tbody>
	<tr>
		<td> 
			<input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer" checked="checked">
			
		</td><td class="zame"><label for="bank_transfer">Предоплата на карту Казком.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
		
		<td></td>
	</tr>
	<tr>
		<td> 
			<input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer" checked="checked">
		</td><td class="zame"><label for="bank_transfer">Предоплата на баланс телефона.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
		<td></td>
	</tr>
	<tr>
		<td> 
			<input type="radio" name="payment_method" value="bank_transfer" id="bank_transfer" checked="checked">
		</td><td class="zame"><label for="bank_transfer">Предоплата на Киви кошелёк.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
		<td></td>
	</tr>
	<tr>
		<td>   
			<input type="radio" name="payment_method" value="cod" id="cod">
		</td><td class="zame"><label for="cod">Оплата наложенным платежом при получении на почте.</label> <p style="float: right; margin: 0 0 0px;">1000 тг.</p></td>
		<td></td>
	</tr>
</tbody>

нужно при выборе кнопки из этой таблице изменять радиокнопку в соседней таблице на этой же странице
если выбрана id="cod" то в соседней должна выбираться id="flat.flat"
соотвественно если выбрана кнопка с id="bank_transfer" то в соседней надо активировать id="free.free" из таблицы

<tbody>
	<tr>
		<td> 
			<input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" checked="checked">
		</td>
		<td><label for="flat.flat">Доставка наложенным платежом, казпочтой </label></td>
		<td style="padding:1px!important">
		</td>
		<td style="text-align:right;width: 22%;"><label for="flat.flat">1000тг.</label>
		</td>
	</tr>
</tbody>

тогда таблицу с выбором доставки можно будет спрятать за ненадобностью.

живой пример можно посмотреть http://generic.xamelion.net.ua/index...ckout/checkout
но для этого надо добавитить 1 товар чтоб появилось оформление.

пробовал

$(function(){
		if($("#cod").prop('checked')){
			document.querySelector('#flat.flat .radio input').checked = true;
			
			}else if($("#bank_transfer").prop('checked')){
			document.querySelector('#free.free .radio input').checked = true;
		}
		
	});

и много всего что нашел в гугле но менять не получаеться.
пробовал и .prop и .attr но вроде после jQuery 1,8 должнео работать prop.
Заранее спасибо за помощь.

Цитата:

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

если выбрана кнопка с id="bank_transfer"

Начнем с того, что ИД должен быть уникальным на странице...

Цитата:

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

живой пример можно посмотреть http://generic.xamelion.net.ua/index...ckout/checkout

Тебе нужно сделать тестовый пример и выложить его тут. На нем тебе покажут некие варианты решения. ;)

вот полный пример где таблицы с выбором оплаты зависит от таблицы метода доставки, а нужно наоборот. и таблицу методов доставки тогда я вообще скрою через css.

<div class="quickcheckoutright">
	<div id="shipping-method">
		<div class="quickcheckout-heading"><i class="fa fa-truck"></i> Способы доставки</div>
		<div class="quickcheckout-content"> 
			<p>Выберите удобный способ доставки для данного заказа</p>
			<table class="table " style="margin-bottom: 0">
				<tbody>
					<tr>
						<td> 
							<input type="radio" name="shipping_method" value="free.free" id="free.free" checked="checked">
						</td>
						<td><label for="free.free">Бесплатная доставка</label></td>
						<td style="padding:1px!important">
						</td>
						<td style="text-align:right;width: 22%;"><label for="free.free">0тг.</label></td>
					</tr>
					<tr>
						<td>   
							<input type="radio" name="shipping_method" value="flat.flat" id="flat.flat">
						</td>
						<td><label for="flat.flat">Доставка наложенным платежом, казпочтой </label></td>
						<td style="padding:1px!important">
						</td>
						<td style="text-align:right;width: 22%;"><label for="flat.flat">1000тг.</label></td>
					</tr>
				</tbody></table>
				<input type="text" name="delivery_date" value="" class="hide">
				<select name="delivery_time" class="hide"><option value=""></option></select>
				<script type="text/javascript"><!--
					$('#shipping-method input[name=\'shipping_method\'], #shipping-method select[name=\'shipping_method\']').on('change', function() {
						if ($('#payment-address input[name=\'shipping_address\']:checked').val()) {
							var post_data = $('#payment-address input[type=\'text\'], #payment-address input[type=\'checkbox\']:checked, #payment-address input[type=\'radio\']:checked, #payment-address input[type=\'hidden\'], #payment-address select, #shipping-method input[type=\'text\'], #shipping-method input[type=\'checkbox\']:checked, #shipping-method input[type=\'radio\']:checked, #shipping-method input[type=\'hidden\'], #shipping-method select, #shipping-method textarea');
							} else {
							var post_data = $('#shipping-address input[type=\'text\'], #shipping-address input[type=\'checkbox\']:checked, #shipping-address input[type=\'radio\']:checked, #shipping-address input[type=\'hidden\'], #shipping-address select, #shipping-method input[type=\'text\'], #shipping-method input[type=\'checkbox\']:checked, #shipping-method input[type=\'radio\']:checked, #shipping-method input[type=\'hidden\'], #shipping-method select, #shipping-method textarea');
						}
						$.ajax({
							url: 'index.php?route=extension/quickcheckout/shipping_method/set',
							type: 'post',
							data: post_data,
							dataType: 'html',
							cache: false,
							success: function(html) {
								loadCart();
							},
							
							error: function(xhr, ajaxOptions, thrownError) {
								alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
							}
						});
					});
					$(document).ready(function() {
						$('#shipping-method input[name=\'shipping_method\']:checked, #shipping-method select[name=\'shipping_method\']').trigger('change');
					});
				//--></script></div>
	</div>
	<div id="payment-method">
		<div class="quickcheckout-heading"><i class="fa fa-credit-card"></i>Способы оплаты
		<p class="quickcheckout_payment_heading_delivery" style="float: right; margin: 0 0 0px; padding-right: 100px;">Доставка</p></div>
		<div class="quickcheckout-content"> 
			<p>Выберите способ оплаты для данного заказа</p>
			<table class="table" style="margin-bottom:0">
				<tbody><tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на карту Казком.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на баланс телефона.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на Киви кошелёк.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td>   
						<input type="radio" name="payment_method" value="cod" class="cod">
					</td><td class="zame"><label for="cod">Оплата наложенным платежом при получении на почте.</label> <p style="float: right; margin: 0 0 0px;">1000 тг.</p></td>
					<td></td>
				</tr>
				</tbody>
			</table>
			<textarea name="survey" class="hide"></textarea>
			<textarea name="comment" class="hide"></textarea>
			<script type="text/javascript"><!--
				$('#payment-method input[name=\'payment_method\'], #payment-method select[name=\'payment_method\']').on('change', function() {
					$.ajax({
						url: 'index.php?route=extension/quickcheckout/payment_method/set',
						type: 'post',
						data: $('#payment-address input[type=\'text\'], #payment-address input[type=\'checkbox\']:checked, #payment-address input[type=\'radio\']:checked, #payment-address input[type=\'hidden\'], #payment-address select, #payment-method input[type=\'text\'], #payment-method input[type=\'checkbox\']:checked, #payment-method input[type=\'radio\']:checked, #payment-method input[type=\'hidden\'], #payment-method select, #payment-method textarea'),
						dataType: 'html',
						cache: false,
						success: function(html) {
						},
			 			error: function(xhr, ajaxOptions, thrownError) {
							alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
						}
					});
				});
			//--></script></div>
	</div>
</div>

Id заменил на класс получилось вот так

Цитата:

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

и таблицу методов доставки тогда я вообще скрою через css.

А она вообще нужна?
Если доставка однозначно определяется по способу оплаты, то зачем все эти манипуляции с таблицей доставки?

Цитата:

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

Id заменил на класс получилось вот так

Как были id="bank_transfer", так и остались

Цитата:

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

вот полный пример

Учись делать тестовые примеры, дабы не напрягать других... ;)

И поменяй ИД с точками на подчеркивания или минусы.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#payment-method :radio').change(function(){
		if ($(this).hasClass('cod')) {
			$('#flat_flat').prop('checked',true);
		} else {
			$('#free_free').prop('checked',true);
		};
	});
});
</script>
</head>
<body>
<div class="quickcheckoutright">
	<div id="shipping-method">
		<div class="quickcheckout-heading"><i class="fa fa-truck"></i> Способы доставки</div>
		<div class="quickcheckout-content"> 
			<p>Выберите удобный способ доставки для данного заказа</p>
			<table class="table " style="margin-bottom: 0">
				<tbody>
					<tr>
						<td> 
							<input type="radio" name="shipping_method" value="free.free" id="free_free" checked="checked">
						</td>
						<td><label for="free.free">Бесплатная доставка</label></td>
						<td style="padding:1px!important">
						</td>
						<td style="text-align:right;width: 22%;"><label for="free.free">0тг.</label></td>
					</tr>
					<tr>
						<td>   
							<input type="radio" name="shipping_method" value="flat.flat" id="flat_flat">
						</td>
						<td><label for="flat.flat">Доставка наложенным платежом, казпочтой </label></td>
						<td style="padding:1px!important">
						</td>
						<td style="text-align:right;width: 22%;"><label for="flat.flat">1000тг.</label></td>
					</tr>
				</tbody>
			</table>
			<input type="text" name="delivery_date" value="" class="hide">
			<select name="delivery_time" class="hide"><option value=""></option></select>
		</div>
	</div>
	<div id="payment-method">
		<div class="quickcheckout-heading">
			<i class="fa fa-credit-card"></i>Способы оплаты
			<p class="quickcheckout_payment_heading_delivery" style="float: right; margin: 0 0 0px; padding-right: 100px;">Доставка</p>
		</div>
		<div class="quickcheckout-content"> 
			<p>Выберите способ оплаты для данного заказа</p>
			<table class="table" style="margin-bottom:0">
				<tbody><tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на карту Казком.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на баланс телефона.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td> 
						<input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
					</td><td class="zame"><label for="bank_transfer">Предоплата на Киви кошелёк.</label> <p style="float: right; margin: 0 0 0px;">Бесплатная</p></td>
					<td></td>
				</tr>
				<tr>
					<td>   
						<input type="radio" name="payment_method" value="cod" class="cod">
					</td><td class="zame"><label for="cod">Оплата наложенным платежом при получении на почте.</label> <p style="float: right; margin: 0 0 0px;">1000 тг.</p></td>
					<td></td>
				</tr>
				</tbody>
			</table>
			<textarea name="survey" class="hide"></textarea>
			<textarea name="comment" class="hide"></textarea>
		</div>
	</div>
</div>
</body>
</html>

Цитата:

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

Если доставка однозначно определяется по способу оплаты, то зачем все эти манипуляции с таблицей доставки?

Поддерживаю. :yes:

Xamelion,
Интересно, как вы планируете различать, какой из этих пунктов выбран? По лейблу?

<tr>
      <td> 
         <input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
      </td>
      <td class="zame">
         <label for="bank_transfer">Предоплата на карту Казком.</label> 
         <p style="float: right; margin: 0 0 0px;">Бесплатная</p>
      </td>
      <td></td>
   </tr>
   <tr>
      <td> 
         <input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
      </td>
      <td class="zame">
         <label for="bank_transfer">Предоплата на баланс телефона.</label>
         <p style="float: right; margin: 0 0 0px;">Бесплатная</p>
      </td>
      <td></td>
   </tr>

Цитата:

Сообщение от Dilettante_Pro (Сообщение 497518)

Xamelion,
Интересно, как вы планируете различать, какой из этих пунктов выбран? По лейблу?

<tr>
      <td> 
         <input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
      </td>
      <td class="zame">
         <label for="bank_transfer">Предоплата на карту Казком.</label> 
         <p style="float: right; margin: 0 0 0px;">Бесплатная</p>
      </td>
      <td></td>
   </tr>
   <tr>
      <td> 
         <input type="radio" name="payment_method" value="bank_transfer" class="bank_transfer" checked="checked">
      </td>
      <td class="zame">
         <label for="bank_transfer">Предоплата на баланс телефона.</label>
         <p style="float: right; margin: 0 0 0px;">Бесплатная</p>
      </td>
      <td></td>
   </tr>

первые три способа оплаты идут с бесплатной доставкой и с одним классом , а последний способ оплаты с лейбл с отдельным классом. вы этого не видите?

все эти манипуляции были в коде модуля, и просто забрать его не получиться так как много переделывать. поэтому нужно поменять существующее для того чтоб добавляло сумму доставки в форму накладной и эту сумму можно было регулировать с админки.

поменять id="free.free" и id="flat.flat" формируется где-то с помощью php который я вообще не понимаю( и к нему привязан уже написанный код моделя, прийдется еще и его искать как менять.
решая одну задачу создам кучу новых.
Помогите пожалуйста с кодом для выбора если выбирается кнопка с классом class="bank_transfer" в таблице доставки выбирается бесплатная доставка то есть первая радиокнопка, если выбирается кнопка с классом class="cod" то из таблицы выбираеться так одновременно с ней Доставка наложенным платежом, то есть вторая кнопка.