使用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

我建议以某种方式关联“对应”元素，我在这种方法中使用了一个类，给出了 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()方法正确识别合适的other单选inputs来检查：

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