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

我有这样的情况：

<!-- 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" />

如果您有任何想法，我们将不胜感激。

使用

.prop（“选中”，正确）

而不是

.attr（'checked'，'checked'）

会很好用的：

发件人：

属性与属性的对比

属性和属性之间的差异在应用程序中可能很重要
具体情况。在jQuery1.6之前，有时使用
.attr（）
方法
检索某些属性时考虑了属性值，
这可能会导致不一致的行为。从jQuery1.6开始
.prop（）
方法提供了一种显式检索属性的方法
值，而
.attr（）
检索属性

例如，selectedIndex、tagName、nodeName、nodeType、，
应检索ownerDocument、defaultChecked和defaultSelected
并使用
.prop（）
方法进行设置。在jQuery1.6之前，这些
使用
.attr（）
方法可以检索属性，但这是错误的
不在
attr
的范围内。这些没有相应的
属性和仅是属性

以下是我将使用的脚本：

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

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

据我所知，你需要这样的布局：

HTML:

如果您遵循其他两个答案的建议，则当前设置从功能角度来看是有效的，但是，因为您的所有孩子都有相同的名字，这意味着他们无法在表单中清楚地发布

我已经将数据属性更改为类，因为检查类更简单

我没有自动检查父对象的第一个子对象，而是将子对象设置为required，如果表单提交时没有，则会强制用户选择on。这只是我个人的偏好，因为强制支票可能会让人非常恼火

希望JS中的注释能够解释其余内容，但是如果您有不同的HTML DOM设置，您可能需要更改选择器，以了解如何查找父对象的子对象和子对象的父对象。
您能够修改HTML吗？只需检查一下，有时人们使用的HTML无法更改：）
$(document).on('change', '[data-smth]', function(){
    $('[data-parent="' + $(this).attr('data-smth') + '"]:first').prop('checked', true);
})

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

<ul>
    <li>
        <!-- First parent -->
        <input type="radio" name="parent" class="parent" />
        <ul>            
            <!-- Children of this one -->
            <li><input type="radio" name="child1" class="child" /></li>
            <li><input type="radio" name="child1" class="child" /></li>
            <li><input type="radio" name="child1" class="child" /></li>
        </ul>
    </li>
    <li>
        <!-- Second parent -->
        <input type="radio" name="parent" class="parent" />
        <ul> 
            <!-- Children of this one -->
            <li><input type="radio" name="child2" class="child" /></li>
            <li><input type="radio" name="child2" class="child" /></li>
            <li><input type="radio" name="child2" class="child" /></li>
        </ul>
    </li>
    <li>
        <!-- Third parent -->
        <input type="radio" name="parent" class="parent" />
        <ul>
            <!-- Children of this one -->
            <li><input type="radio" name="child3" class="child" /></li>
            <li><input type="radio" name="child3" class="child" /></li>
            <li><input type="radio" name="child3" class="child" /></li>
        </ul>
    </li>
</ul>

$('input[type="radio"]').on('change', function() {
    $('.child').prop("checked", false); // Reset all child checkbox
    // Check if it's a parent or child being checked
    if ($(this).hasClass('parent')) {
        $('.child').prop('required', false); // Set all children to not required
        $(this).next('ul').find('.child').prop('required', true);  // Set the children of the selected parent to required 
    } else if ($(this).hasClass('child')) {
        $(this).prop("checked", true); // Check the selected child
        $(this).parent().parent().prev('.parent').prop('checked', true); // Check the selected parent
    }
});