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

Question

我需要做类似于 JQuery Sync Selected Radio Button between 2 radio button groups 的事情.

我有 2 个 radio 组 -

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

我得到 same=>same，但只有当 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 发生变化时，我得到 same=>same -
radio_A_1=>radio_B_1
radio_A_2=>radio_B_2radio_B_1=>radio_A_1
radio_B_2=>radio_A_2

如何同步它们1=>2/2=>1，而不是1=>1/2 =>2？是否可以用 1 个代码块而不是 2 个代码块来完成？

Answer 1

您需要添加一些代码来获取刚刚单击的元素的index，如果是1，则将其设置为0，或者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/)

"And can it be done with 1 block of code, instead of 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/