如果选择了父项，则选择子项单选按钮，反之亦然

我有这样的情况：

<!-- First parent -->
<input type="radio" name="parent_1" data-smth="parent_1" />

<!-- Children of this one -->
<input type="radio" name="child" data-parent="parent_1" />
<input type="radio" name="child" data-parent="parent_1" />
<input type="radio" name="child" data-parent="parent_1" />

<!-- Second parent -->
<input type="radio" name="parent_1" data-smth="parent_2" />

<!-- Children of this one -->
<input type="radio" name="child" data-parent="parent_2" />
<input type="radio" name="child" data-parent="parent_2" />
<input type="radio" name="child" data-parent="parent_2" />

<!-- Third parent -->
<input type="radio" name="parent_1" data-smth="parent_3" />

<!-- Children of this one -->
<input type="radio" name="child" data-parent="parent_3" />
<input type="radio" name="child" data-parent="parent_3" />
<input type="radio" name="child" data-parent="parent_3" />

现在我想强制检查覆盖组。所以如果有人选择data-smth="parent_1"，其中一个孩子（data-parent="parent_1") 也必须被选中。

如果有人点击child例如，另一组的parent被选中。

所以这基本上是双向的。

我曾尝试在 jQuery 中实现类似的功能，但脚本很快就会混淆，然后用户就可以按照自己的意愿进行操作。但一开始，在不尝试混淆逻辑的情况下，它工作得很好。

这是我当前的代码：

$(function() {
    $(document).on('click', '[data-smth]', function(){
        $('[data-parent="' + $(this).attr('data-smth') + '"]:first').attr('checked', 'checked');
    })

    $(document).on('click', '[data-parent]', function(){
        $('[data-smth="' + $(this).attr('data-parent') + '"]').attr('checked', 'checked');
    })
})

想法将不胜感激。

Use .prop("checked", true);代替.attr('checked', 'checked');

会工作得很好：http://jsfiddle.net/fq1d2sar/ http://jsfiddle.net/fq1d2sar/

From jQuery API http://api.jquery.com/prop/ :

属性与属性

属性和特性之间的区别在以下方面可能很重要： 具体情况。在 jQuery 1.6 之前，.attr()有时方法 检索某些属性时考虑属性值， 这可能会导致不一致的行为。从 jQuery 1.6 开始，.prop()方法提供了一种显式检索属性的方法 值，同时.attr()检索属性。

例如，selectedIndex、tagName、nodeName、nodeType、 应检索ownerDocument、defaultChecked 和defaultSelected 并设置为.prop()方法。在 jQuery 1.6 之前，这些 属性可通过以下方式检索.attr()方法，但这是 不在范围内attr。这些都没有对应的 属性并且只是属性。