2

2つのラジオボタングループ間でJQuerySyncSelectedRadioButtonと同様のことを行う必要があります。

私は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ですか？そして、2ブロックではなく1ブロックのコードで実行できますか？

4

1 に答える 1

3

indexクリックしたばかりの要素を取得して、そうである場合、またはである場合に設定するための0コードを追加する必要があります。頭に浮かんだ最初の方法は次のとおりです。110

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

「そして、2ブロックではなく1ブロックのコードで実行できますか？」

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...基本的に、ラジオボタンのいずれかがチェックされている場合は常に、同じ値の属性を持つ他のすべてのラジオボタンを見つけて、それらもチェックします。

このデモに示すように、これは3つ以上のグループで機能することに注意してください：http：//jsfiddle.net/cTQeJ/2/

于 2012-11-23T08:20:20.273 に答える