JSFiddle - React, Tailwind, and code Playground

by Nilesh Injulkar

HTML

<input type="checkbox" id="parent1" />parent1
<br/>
<div class="parent1" hidden="true">&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child1
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child2
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent1" hidden="true" />child3
    <br/>
</div>
<input type="checkbox" id="parent2" />parent2
<br/>
<div class="parent2" hidden="true">&nbsp;&nbsp;
    <input type="checkbox" class="parent2" hidden="true" />child1
    <br/>&nbsp;&nbsp;
    <input type="checkbox" class="parent2" id="parent3" hidden="true"
    />child2-parent
    <br/>
</div>
<div class="parent3" hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child1
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child2
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child3
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" hidden="true"
    />child4
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent3" id="parent4"
    hidden="true" />child5-parent
    <br/>
</div>
<div class="parent4" hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent4"
    hidden="true" />child1
    <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" class="parent4"
    hidden="true" />child2
    <br/>
</div>

JavaScript

$(function () {
    $(":checkbox[id*='parent']").change(function () {
        alert("Hi");
        if($(this)is(":checked") {
            var inner_id = $(this).attr('id');
            	
            $("."+inner_id).each(function(){
            	$(this).removeAttr("hidden");
                $(this).attr('checked', false);
            });
            }
        });
    });
});

$(function () {
    $(':checkbox').click(function () {
        var is_chk = $(this).attr('checked');
        var its_id = $(this).attr('id');
        if (is_chk != 'checked') {
            $("."+its_id).attr('hidden', 'true');
        }
    });
});