+ Start a Discussion
@ M  Coder@ M Coder 

checkbox issue in javascript/Lightning

HI All , 
can any one help me with this requirement ,
1)  where when i click on parent checkbox , need to select all child checkbox
2) when i unselect parent checkbox , need to unselect all childs 
3) let us suppose i click on parent checkbox that selects all child checkbox , when i unselect one checkbox in child , the parent checkbox has to get deselected.

User-added image

Mark as best answer, If it resloves !!
it will work on visualforce pages
<apex:page showHeader="false" sidebar="false" lightningStylesheets="true">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <li><input type="checkbox" id="select_all" /> Master</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 1</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 2</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 3</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 4</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 5</li>
        <li><input class="checkbox" type="checkbox" name="check[]" /> Child 6</li>
        $("#select_all").change(function() { //"select all" change 
            $(".checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
        $('.checkbox').change(function() {
            //uncheck "select all", if one of the listed checkbox item is unchecked
            if(false == $(this).prop("checked")) { //if this item is unchecked
                $("#select_all").prop('checked', false); //change "select all" checked status to false
            //check "select all" if all checkbox items are checked
            if($('.checkbox:checked').length == $('.checkbox').length) {
                $("#select_all").prop('checked', true);
Mark as resloved if it helps :) :)
Bhanu Prakash
visit ForceLearn.com ​ 

please go through the following post here :

i have implemented the similar functionality in lightning component using javaScript
User-added image

Thanks let us know if it helps you
Anil SomasundaranAnil Somasundaran
Please use the lightning:Datatable for your requirement. 
<aura:attribute name="mydata" type="Object"/>
 <aura:attribute name="mycolumns" type="List"/>

<lightning:datatable data="{! v.mydata }"
        columns="{! v.mycolumns }"
        keyField="id" />

Please refer the below URL for component detail. 

Let me know if you are looking for custom datatable.

Please mark this as best answer and upvote if your query has been resolved. Visit my blog to find more about lightning https://techevangel.com/author/anilsomasundaran/  (http://techevangel.com/author/anilsomasundaran/)​)
@ M  Coder@ M Coder
hi folks, 

Bhanu prakash : I need this for lightning component .
piyush:  Requirement  3 is not working i checked