在2個單選按鈕組之間同步選定的單選按鈕 - 對面

Question

我需要做類似於JQuery Sync Selected Radio Button between 2 radio button groups的操作。

我有2個無線電組 -

<input type="radio" name="radio_A" id="radio_A_1" value="1" />1st 
<input type="radio" name="radio_A" id="radio_A_2" value="2" />2nd 

<input type="radio" name="radio_B" id="radio_B_1" value="1" />1st 
<input type="radio" name="radio_B" id="radio_B_2" value="2" />2nd 

當radio_A_1被選中，我需要radio_B_2同步/檢查。的關係將是─
radio_A_1 =>radio_B_2
radio_A_2 =>radio_B_1
radio_B_1 =>radio_A_2
radio_B_2 =>radio_A_1

使用答案提供#8804502

$('input[name=radio_A]').change(function() { 
var index = $(this).index('input[name=radio_A]'); 
console.log(index); 
$('input[name=radio_B]:eq(' + index + ')').attr('checked','checked'); 
}); 

我得到相同=>相同，但只有當A更改 -
radio_A_1 =>radio_B_1
radio_A_2 =>radio_B_2

所以，如果我複製它，改變它，如果從A=>B到B=>A -

$('input[name=radio_A]').change(function() { 
var index = $(this).index('input[name=radio_A]'); 
console.log(index); 
$('input[name=radio_B]:eq(' + index + ')').attr('checked','checked'); 
}); 
$('input[name=radio_B]').change(function() { 
var index = $(this).index('input[name=radio_B]'); 
console.log(index); 
$('input[name=radio_A]:eq(' + index + ')').attr('checked','checked'); 
}); 

我得到相同=>相同，當任A或B變化 -
radio_A_1 =>radio_B_1
radio_A_2 =>radio_B_2 radio_B_1 =>radio_A_1
radio_B_2 =>radio_A_2

我怎樣才能同步他們1=>2/2=>1，而不是1=>1/2=>2？它可以用1塊代碼而不是2來完成嗎？

Answer 1

您需要添加一些代碼，以剛剛點擊的元素的index並將其設置爲0如果是1，或者1如果0。浮現在腦海的第一種方式如下：

$('input[name=radio_A]').change(function() { 
    var index = $(this).index('input[name=radio_A]') === 1 ? 0 : 1; 
    $('input[name=radio_B]:eq(' + index + ')').attr('checked', 'checked'); 
}); 
$('input[name=radio_B]').change(function() { 
    var index = $(this).index('input[name=radio_B]') === 1 ? 0 : 1; 
    $('input[name=radio_A]:eq(' + index + ')').attr('checked', 'checked'); 
}); 

演示：http://jsfiddle.net/cTQeJ/1/

雖然你也可以嘗試：

var index = 1 - $(this).index('input[name=radio_A]'); 

（或下面的演示使用了一種有趣的黑客如果你想使你的代碼混亂：http://jsfiddle.net/cTQeJ/）

「，可以是用1塊代碼完成，而不是2？「

如果您可以稍微修改html，那麼使用單一的短代碼塊很容易。嘗試這樣的變化：

<input type="radio" name="radio_A" data-sync="1" value="1" />1st 
<input type="radio" name="radio_A" data-sync="2" value="2" />2nd 

<input type="radio" name="radio_B" data-sync="2" value="1" />1st 
<input type="radio" name="radio_B" data-sync="1" value="2" />2nd 

我添加了一個data-sync屬性每個單選按鈕（並刪除了id屬性，因爲沒有被使用過，但很明顯，如果需要的話你可以離開，在）。然後，你可以寫一個簡單的函數是這樣的：

var $radios = $('input[data-sync]'); 
$radios.change(function() { 
    $radios.filter('[data-sync="' + $(this).attr('data-sync') + '"]') 
      .prop('checked', true); 
});​ 

...，基本上說，每當任何單選按鈕的檢查，查找具有相同價值的data-sync屬性的所有其他單選按鈕，並檢查他們。

注意，這將有兩個以上的團體合作，如在此演示：http://jsfiddle.net/cTQeJ/2/