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 =＆GT; radio_B_2
radio_A_2 =＆GT; radio_B_1
radio_B_1 =＆GT; radio_A_2
radio_B_2 =＆gt; 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');
});

我得到相同的=＆gt;相同，但只有在A更改时才会这样 radio_A_1 =＆GT; radio_B_1
radio_A_2 =＆GT; 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更改时，我得到相同的=＆gt;相同 radio_A_1 =＆GT; radio_B_1
radio_A_2 =＆GT; radio_B_2 radio_B_1 =＆GT; radio_A_1
radio_B_2 =＆GT; radio_A_2

如何与1=>2 / 2=>1同步，而不是1=>1 / 2=>2？它可以用1块代码完成，而不是2吗？

Answer 1

您需要添加一些代码才能获取刚刚点击的元素的index，如果它是0则设置为1，如果是1则设置为0 {1}}。想到的第一种方式如下：

$('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/

在2个单选按钮组之间同步所选单选按钮 - 对面

1 个答案: