如何通過檢查另一個單選按鈕來設置選中的單選按鈕

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臺已經：

第一個共享類名'收音機'

第二個共享的類名稱「SHIPPING_METHOD」

邏輯

1）第一組

2的所有無線電添加click事件）獲取一個我們點擊的順序排名具有在所述第二組

// 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(); 
}) 

有相同索引

3）迫使上的單選按鈕的點擊事件是的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行一個單選按鈕的變化，將獲得點擊的單選按鈕的索引，它會設置單選按鈕的第二列表中的單選按鈕來檢查。

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); 
});