JSFiddle - React, Tailwind, and code Playground

by silpa reddy

HTML

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

JavaScript

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