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

i have situation one:

<!-- first parent --> <input type="radio" name="parent_1" data-smth="parent_1" />  <!-- children of 1 --> <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 1 --> <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 1 --> <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 want force check fir reach group. if selects data-smth="parent_1", 1 of children (data-parent="parent_1") must selected well.

and if clicks child of group example, parent gets selected.

so goes both ways.

i have tried achieving similar in jquery, script gets mixed , user receives possibility pleases. in beginning, without trying mix logic up, works fine.

this 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 appreciated.

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

will work fine: http://jsfiddle.net/fq1d2sar/

from jquery api :

attributes vs. properties

the difference between attributes , properties can important in specific situations. before jquery 1.6, .attr() method took property values account when retrieving attributes, cause inconsistent behavior. of jquery 1.6, .prop() method provides way explicitly retrieve property values, while .attr() retrieves attributes.

for example, selectedindex, tagname, nodename, nodetype, ownerdocument, defaultchecked, , defaultselected should retrieved , set .prop() method. prior jquery 1.6, these properties retrievable .attr() method, not within scope of attr. these not have corresponding attributes , properties.