如果选择了父级，则选择子级单选按钮，反之亦然 [英] Select child radio button if parent was chosen and vice-versa

问题描述

我遇到这样的情况:

<!-- 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").

Now I want to force a check fir reach group. So if someone selects data-smth="parent_1", one of the children (data-parent="parent_1") must get selected as well.

例如，如果有人单击另一个组的子级，则会选择其父级.

And if someone clicks the child of another group for example, its parent gets selected.

所以这基本上是双向的.

So this goes basically both ways.

我曾尝试在jQuery中实现类似的功能，但是脚本很快就混乱了，然后用户可以根据自己的喜好进行操作.但是从一开始，在没有尝试混淆逻辑的情况下，它就可以很好地工作.

I have tried achieving something similar in jQuery, but the script gets mixed up quickly and the user then receives the possibility to do as he pleases. But in the beginning, without trying to mix the logic up, it works very fine.

这是我当前的代码:

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

想法将不胜感激.

推荐答案

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

可以正常工作: http://jsfiddle.net/fq1d2sar/

来自 jQuery API :

属性与属性

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

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

例如，selectedIndex，tagName，nodeName，nodeType， 应该检索ownerDocument，defaultChecked和defaultSelected 并使用.prop()方法进行设置.在jQuery 1.6之前，这些 属性可以通过.attr()方法检索，但这是 不在attr的范围内.这些没有对应的 属性，而仅仅是属性.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

这篇关于如果选择了父级，则选择子级单选按钮，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！