2

我需要在 2 个单选按钮组之间执行类似于JQuery Sync Selected Radio Button 的操作。

我有 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 块来完成吗？

4

1 回答 1

3

您需要添加一些代码来获取index刚刚单击的元素并将其设置为0if it is1或1if it is 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/

于 2012-11-23T08:20:20.273 回答