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

我有两组单选按钮。 我想当我点击一个组中的一个按钮时，同时自动选择另一个组中相应的按钮。我如何使用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>

A
B



A1
地下一层
$（'input:radio'）。更改（函数（）{
//如果选择A，也选择A1
//如果检查B，也检查B1
//如果选择A1，也选择A
//如果检查B1，也检查B
})

---

以下是JSFIDLE:

我建议以某种方式关联“对应”元素，我在这种方法中使用了一个类，给出了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

或者使用自定义的

数据-*

属性：

<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

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

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

顺便说一句，如果您将关联文本按原样包装到

标签

元素中（使用

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>

参考资料：

• JavaScript:
• jQuery：

您可以试试这个（）：

更新：这一个（不同）将通过单击两个组（）工作：

---

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

$(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 );
    });
});

如果你只有两组，效果会很好。您可能需要稍微调整代码以处理两组以上的单选按钮

编辑

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

$(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 );
        });
    });
});

---

但如果有人首先单击第二组中的

输入，则不会自动选择第一组中的元素（我首先采用了这种方法，然后意识到允许单击后面的组所需的字符串操作将比实际值更大）。同样有效。感谢您的帮助。更新了两组的另一个示例。您的第一个建议对我来说是最好的方式，一个小代码，带有我需要的结果，谢谢。非常欢迎您，我很高兴能够提供帮助！但是，请注意，通过更改元素的
className
进行选择确实意味着，如果添加其他类，它可能会停止工作（因为
className
返回的字符串中有空格，并且其他“对应”元素中可能不存在其他类本身）。我真的建议切换到后一种方法，至少有一些未来的证明。工作起来很有魅力，但我更喜欢小代码，谢谢。
<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>

$('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);
});

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

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

$(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 );
    });
});

$(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 );
        });
    });
});