[英]how to set checked radio button by checking another radio button
我有2个单独的字段,每个字段有4个单选按钮。
字段nr1具有未使用jquery选中的单选按钮,字段nr2具有默认情况下选中的第一个单选按钮。
我需要的是,如果在字段nr1中选中了一个单选按钮,那么它会在字段nr2中检查相同的单选按钮。
这是我的html样子:
<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>
<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>
<br>
<tr class="shipping">
<th>Piegādes izmaksas</th>
<td>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
<label for="shipping_method_0_flat_rate">Pasta Stacijas: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
<label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
<label for="shipping_method_0_apg_shipping">DLW Kurjeris: <span class="amount">€ 9.00</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
<label for="shipping_method_0_local_pickup">Uz vietas - Saldū (Bez maksas)</label>
</li>
</ul>
</td>
</tr>
当页面加载时,我使用此jquery取消选中字段nr1单选按钮。
jQuery(document).ready(function(){
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() {
jQuery(this).prop('checked', false);
});
});
这是jsfiddle的链接
您可以通过多种方式实现这一目标
一种方法应考虑2套无线电
您已经有2套了:
第一个共享类名“ radio”
第二个共享类名“ shipping_method”
逻辑
1)在第一组的所有广播中添加一个点击事件
2)获取我们点击的那一个的排名
3)在第二组中具有相同索引的单选按钮上强制单击事件
// Track the click on the first set of radio
jQuery('.radio').on('click',function(){
// Get the element index , which one we click on
var indx = jQuery(this).index('.radio');
// Trigger a click on the same index in the second radio set
jQuery('.shipping_method')[indx].click();
})
有jsfiddle: http : //jsfiddle.net/MMJRk/21/
首先,您需要找出选中了哪个框。 以下链接可能会有所帮助。
然后,您需要遍历下一个复选框,将值与每个框所需的值进行比较。 当您找到想要的那个。 检查那个。 链接有关如何复选框。
好吧,我必须承认,这不是获得所需东西的最理想方法。 但这确实成功了: http : //jsfiddle.net/veritas87/MMJRk/25/
jQuery('p.form-row input[type=radio]').on('change', function () {
var radioNumber = $(this).index('.radio');
$("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
});
简而言之,当单选按钮在p.form-row中变化时,它将获得单击的单选按钮的索引,并将第二个单选按钮列表中的单选按钮设置为选中状态。
我已经更新了您的jsfiddle ,现在可以使用了。
基本上,我为每个输入(及其对应的输入)分配了一个使用自定义数据属性data-index
( data-index
)。 我将事件处理程序附加到第一组输入,然后根据已检查的输入的索引,检查第二组中的正确单选按钮:
$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
if (!this.checked) return;
var index = this.getAttribute('data-index');
$('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.