在两个单选按钮组之间同步选定的单选按钮 - 相反的

Question

我需要做类似于JQuery在两个单选按钮组之间同步选定的单选按钮的操作。

我有两个单选按钮组 -

<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改变时，才会出现same=>same的情况。
例如：
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任一改变时，我得到的结果都是same，即：
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个？

- Sean

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/）

"能否只用一个代码块而不是两个来完成？"

如果您可以稍微修改一下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/

- nnnnnn

---

这个很好用。谢谢你的帮助。我特别喜欢“以下演示使用了一种有趣的技巧”这句话。 - Sean