javascript - Select child radio button if parent was chosen and vice-versa - Stack Overflow

admin管理员组

文章数量:1329040

I have a situation like this one:

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

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.

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.

This is my current code:

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

Ideas would be appreciated.

I have a situation like this one:

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

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.

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.

This is my current code:

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

Ideas would be appreciated.

• javascript
• jquery

Share Improve this question Follow asked Nov 13, 2014 at 9:48 abortedaborted 4,5511414 gold badges7373 silver badges134134 bronze badges 2

• Are you able to amend the html? – Jamie Barker Commented Nov 13, 2014 at 10:02
• Just checking, sometimes people are working with html they cannot change :) – Jamie Barker Commented Nov 13, 2014 at 10:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Use .prop("checked", true); instead of .attr('checked', 'checked');

Will work just fine: http://jsfiddle/fq1d2sar/

From jQuery API :

Attributes vs. Properties

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.

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.

From what I understand, you're going to be wanting some sort of layout like this: http://jsfiddle/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
    }
});

You current setup works from a functionality perspective if you follow the advice of the other 2 answers, however because all your children have the same name it means they cannot be posted in the form distinctly.

I have changed the data- attributes to classes as it's simpler to check a class.

Instead of automatically checking the first child of the parent, I've made it so it will set the children to required which should force the user to select on if they haven't upon form submission. This is just my personal preference as forcing a check could off-piss people much.

Hopefully the ments in the JS explain the rest, but if you have a different HTML DOM setup, you might need to change the selectors in how it finds the parent's children and the children's parents.

Here is the script I would use:

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

本文标签： javascriptSelect child radio button if parent was chosen and viceversaStack Overflow