我有 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 套 radio
你已经有 2 组了:
第一个共享类名'radio'
第二个共享类名“shipping_method”
逻辑
1)在第一组的所有radio上添加点击事件
2) 获取我们点击的那个的order rank
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/
关于javascript - 如何通过选中另一个单选按钮来设置选中的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22356084/