Question

我遇到这样的情况：

<!-- 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"）也必须被选中。

如果有人点击其他群组的子，则会选择父。

所以这基本上都是双向的。

我已尝试在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');
    })
})

我们将不胜感激。

Answer 1

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

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

来自jQuery API：

属性与属性

属性和属性之间的区别非常重要   具体情况。在jQuery 1.6之前，有时会使用.attr()方法   在检索某些属性时考虑了属性值，   这可能会导致行为不一致。截至jQuery 1.6，   .prop()方法提供了一种显式检索属性的方法   值{，.attr()检索属性。

例如，selectedIndex，tagName，nodeName，nodeType，   应检索ownerDocument，defaultChecked和defaultSelected   并使用.prop()方法设置。在jQuery 1.6之前，这些   可以使用.attr()方法检索属性，但这是   不属于attr的范围。这些没有相应的   属性，只是属性。

Answer 2

根据我的理解，您将会想要某种类似的布局：http://jsfiddle.net/0Lo1qwwf/2/

HTML：

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

JS：

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

如果您遵循其他2个答案的建议，您当前的设置是从功能角度进行工作，但是因为您的所有孩子都具有相同的名称，这意味着他们无法明确地在表单中发布。

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

我没有自动检查父母的第一个孩子，而是将其设置为必需，这样可以强制用户选择，如果他们没有提交表格。这只是我个人的偏好，因为强制支票可能会让人感到非常沮丧。

希望JS中的注释解释其余部分，但是如果你有不同的HTML DOM设置，你可能需要更改选择器如何找到父母的孩子和孩子的父母。

Answer 3

这是我将使用的脚本：

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

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

3 个答案: