Question

我有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">€&nbsp;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">€&nbsp;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">€&nbsp;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

的链接

Answer 1

你可以通过很多方式实现这一目标

一种方法应该是考虑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/

Answer 2

首先，您需要找出选中的方框。以下链接可能有所帮助。

In jQuery, how do I select an element by its name attribute?

然后，您需要遍历下一个复选框，将值与每个框所需的值进行比较。当你找到你想要的那个。检查一下。链接如何复选框。

How to check a radio button with jQuery ?

Answer 3

好吧，我必须承认这不是获得你想要的最理想的方式。但它可以解决问题：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中的radiobutton发生变化时，它将获得所点击的单选按钮的索引，并且它将在第二个radiobutton列表中设置radiobutton以进行检查。

Answer 4

我已更新您的jsfiddle，现在可以正常使用。

基本上，我为每个输入（及其对应方）分配了一个使用自定义数据属性（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);
});

如何通过检查另一个单选按钮设置选中的单选按钮

4 个答案: