使用jquery同时检查不同的单选按钮

Question

我有两组单选按钮。 我想当我点击一个组的一个按钮时，同时选择另一个组中的相应按钮。我怎么用jquery做到这一点？我尝试了很多方法，没有成功。

<input type="radio" name="RadioGroup1" value="A" id="A">A
<input type="radio" name="RadioGroup1" value="B" id="B">B
<br><br>
<input type="radio" name="RadioGroup2" value="A1" id="A1">A1
<input type="radio" name="RadioGroup2" value="B1" id="B1">B1

<script>
  $('input:radio').change(function(){
    // if check A, check A1 too
    // if check B, check B1 too
    // if check A1, check A too
    // if check B1, check B too
   })
</script>

这是jsfiddle：http://jsfiddle.net/F9LYL/

Answer 1

我建议关联相应的＆＃39;不知何故，我在这种方法中使用了一个类，给出了HTML：

<input class="A" type="radio" name="RadioGroup1" value="A" id="A">A
<input class="B" type="radio" name="RadioGroup1" value="B" id="B">B
<br><br>
<input class="A" type="radio" name="RadioGroup2" value="A1" id="A1">A1
<input class="B" type="radio" name="RadioGroup2" value="B1" id="B1">B1

允许以下jQuery工作：

$('input[type="radio"]').change(function(){
    $('.' + this.className).prop('checked', this.checked);
});

JS Fiddle demo

或使用自定义data-*属性：

<input data-group="A" type="radio" name="RadioGroup1" value="A" id="A">A
<input data-group="B" type="radio" name="RadioGroup1" value="B" id="B">B
<br><br>
<input data-group="A" type="radio" name="RadioGroup2" value="A1" id="A1">A1
<input data-group="B" type="radio" name="RadioGroup2" value="B1" id="B1">B1

使用以下jQuery，使用attribute-equals选择器：

$('input[type="radio"]').change(function(){
    $('[data-group="' + $(this).data('group') + '"]').prop('checked', this.checked);
});

JS Fiddle demo

同样，您也可以将元素包装成单独的组：

<fieldset>
    <input data-group="A" type="radio" name="RadioGroup1" value="A" id="A" />A
    <input data-group="B" type="radio" name="RadioGroup1" value="B" id="B" />B
</fieldset>
<fieldset>
    <input data-group="A" type="radio" name="RadioGroup2" value="A1" id="A1" />A1
    <input data-group="B" type="radio" name="RadioGroup2" value="B1" id="B1" />B1
</fieldset>

并使用：

$('input[type="radio"]').change(function () {
    $('input[type="radio"]:nth-child(' + ($(this).index() + 1) + ')').prop('checked', this.checked);
});

JS Fiddle demo

顺便说一句，如果您将关联的文本包装到label元素（具有for属性）中，因为应该，则给出：

<input type="radio" name="RadioGroup1" value="A" id="A"><label for="A">A</label>
<input type="radio" name="RadioGroup1" value="B" id="B"><label for="B">B</label>
<input type="radio" name="RadioGroup2" value="A1" id="A1"><label for="A1">A1</label>
<input type="radio" name="RadioGroup2" value="B1" id="B1"><label for="B1">B1</label>

然后，以下jQuery将首先创建适当的包装，然后使用index()方法正确识别相应的其他无线电input以进行检查：

$('input[type="radio"]').each(function () {
    if (!(this.parentNode instanceof HTMLFieldSetElement)) {
        var fieldset = $('<fieldset />');
        fieldset.insertBefore(this).append(document.getElementsByName(this.name));
    }
    $(this).after($('label[for="' + this.id + '"]'));
}).change(function(){
    $('input[type="radio"]:nth-child(' + ($(this).index() + 1) + ')').prop('checked', this.checked);
});

JS Fiddle demo

参考文献：

• JavaScript的：
  • getElementsByName()。
  • instanceof。
  • Logical 'NOT' (!) operator。
  • Node.parentNode。
• jQuery的：
  • after()。
  • append()。
  • Attribute-equals ([attribute="value"]) selector。
  • change()。
  • data()。
  • each()。
  • index()。
  • insertBefore()。
  • prop()。

Answer 2

您可以尝试此操作（Example）：

$('input:radio').change(function(){
    $('input:radio[id^="'+this.value+'"]').prop('checked', 1);
});

更新：通过点击两个组（Example），这个（不同）可以正常工作：

$('input:radio').change(function(){
    $('input:radio[id^="'+this.value[0]+'"]').prop('checked', 1);
});

Answer 3

您可以使用此代码。我相信这很简单。请参见底部的演示：

$(function() {
    var radios = $('[name=RadioGroup1],[name=RadioGroup2]');
    $('input:radio').change(function(){
        var index = $( this ).index( $('[name=' + this.name + ']') );
        radios.not( $('[name=' + this.name + ']') ).eq( index )
        .prop( 'checked', true );
    });
});

JSFIDDLE DEMO

如果你只有两个小组，那就太棒了。您可能需要稍微调整代码以处理两组以上的单选按钮。

修改

下面的版本和演示经过调整，可以处理任意数量的单选按钮组，并且您没有对标记进行任何更改：

$(function() {
    var radios = $('[name^=RadioGroup]');
    $('input:radio').change(function(){
        var index = $( this ).index( $('[name=' + this.name + ']') );
        var groups = [];
        radios.not( $('[name=' + this.name + ']') )
        .each(function(v,i) {
            $.inArray(this.name, groups) > -1 || groups.push( this.name );
        });
        $.each(groups, function(i,v) {
            $('[name=' + v + ']').eq( index ).prop( 'checked', true );
        });
    });
});

JSFIDDLE DEMO