Check/Uncheck all for checkbox list in repeater

Question

User-1641476077 posted

I would like to do a check all/uncheck all functions for the checkbox that is populated by a repeater.

the function I would like to achieve, 

• when the user clicks on the parent checkbox, the children checkboxes should be selected/unselected depending on the parent checkbox state
• if all the children checkboxes are being checked, if user uncheck on of the children checkbox, the parent checkboxes supposed to be unchecked

tried using jquery to attached the event but the event doesn't seem to be fired

My markup

<asp:Repeater ID="rptCategory" runat="server">
        <ItemTemplate>
            <div class="checkboxItem col-md-3">
            <asp:CheckBox Text='<%# DataBinder.Eval(Container.DataItem, "CategoryName")%>' 
                            CssClass='<%# "categoryCheckbox p" + DataBinder.Eval(Container.DataItem, "CategoryID")%>' 
                            runat="server" />
            <asp:CheckBoxList ID="chbChildren" 
                            CssClass='<%# "categoryCheckbox p" + DataBinder.Eval(Container.DataItem, "CategoryID")%>' 
                            runat="server" DataSource='<%# DataBinder.Eval(Container.DataItem, "subList")%>'
                            DataTextField="CategoryName" DataValueField="CategoryID"></asp:CheckBoxList>
            </div>
        </ItemTemplate>
</asp:Repeater>

   <script type="text/javascript">

       $(document).ready(function(){
           $(".categoryCheckbox").on("change", function () {
               console.debug("checkbox changed");
           })
       });

   </script>

How the checkboxes look like, red boxes are the parent checkbox

Answer 1

User288213138 posted

Hi bczm8703,

• when the user clicks on the parent checkbox, the children checkboxes should be selected/unselected depending on the parent checkbox state
• if all the children checkboxes are being checked, if user uncheck on of the children checkbox, the parent checkboxes supposed to be unchecked

According to your description, i made demo for you.

<asp:Repeater ID="rptCategory" runat="server">
            <ItemTemplate>
                <div>
                    <asp:CheckBox ID="chkAll" Text="Select All" runat="server" AutoPostBack="true" OnCheckedChanged="chkAll_CheckedChanged" />
                    <asp:CheckBoxList ID="chkFruits" runat="server" AutoPostBack="true" OnSelectedIndexChanged="chkFruits_SelectedIndexChanged">
                        <asp:ListItem Text="Mango" />
                        <asp:ListItem Text="Apple" />
                        <asp:ListItem Text="Banana" />
                        <asp:ListItem Text="Pineapple" />
                        <asp:ListItem Text="Guava" />
                        <asp:ListItem Text="Grapes" />
                        <asp:ListItem Text="Papaya" />
                    </asp:CheckBoxList>
                </div>
            </ItemTemplate>
        </asp:Repeater>

 protected void chkAll_CheckedChanged(object sender, EventArgs e)
        {
            foreach (RepeaterItem item in rptCategory.Items)
            {
                CheckBoxList chkFruits = item.FindControl("chkFruits") as CheckBoxList;
                CheckBox chkAll = item.FindControl("chkAll") as CheckBox;
                foreach (ListItem item1 in chkFruits.Items)
                {
                    item1.Selected = chkAll.Checked;
                }
            }         
        }

        protected void chkFruits_SelectedIndexChanged(object sender, EventArgs e)
        {
            foreach (RepeaterItem item in rptCategory.Items)
            {
                CheckBoxList chkFruits = item.FindControl("chkFruits") as CheckBoxList;
                CheckBox chkAll = item.FindControl("chkAll") as CheckBox;

                bool isAllChecked = true;
                foreach (ListItem item1 in chkFruits.Items)
                {
                    if (!item1.Selected)
                    {
                        isAllChecked = false;
                        break;
                    }
                }
                chkAll.Checked = isAllChecked;
            }
            
        }

The result:

Best regards,

Sam

Answer 2

User-2054057000 posted

the function I would like to achieve, 

• when the user clicks on the parent checkbox, the children checkboxes should be selected/unselected depending on the parent checkbox state
• if all the children checkboxes are being checked, if user uncheck on of the children checkbox, the parent checkboxes supposed to be unchecked

You can have a parent checkbox on the repeater and when you click it all it's children should be checked or unchecked depending upon what is the state of the parent checkbox. The same thing has been done in the article Check Uncheck all checkbox Of ASP.NET Checkboxlist using jQuery. All you have to do is to use checkbox list for children and a checkbox for their parent.

Answer 3

User-1641476077 posted

Hi bczm8703,

bczm8703

• when the user clicks on the parent checkbox, the children checkboxes should be selected/unselected depending on the parent checkbox state
• if all the children checkboxes are being checked, if user uncheck on of the children checkbox, the parent checkboxes supposed to be unchecked

According to your description, I made a demo for you.

<asp:Repeater ID="rptCategory" runat="server">
            <ItemTemplate>
                <div>
                    <asp:CheckBox ID="chkAll" Text="Select All" runat="server" AutoPostBack="true" OnCheckedChanged="chkAll_CheckedChanged" />
                    <asp:CheckBoxList ID="chkFruits" runat="server" AutoPostBack="true" OnSelectedIndexChanged="chkFruits_SelectedIndexChanged">
                        <asp:ListItem Text="Mango" />
                        <asp:ListItem Text="Apple" />
                        <asp:ListItem Text="Banana" />
                        <asp:ListItem Text="Pineapple" />
                        <asp:ListItem Text="Guava" />
                        <asp:ListItem Text="Grapes" />
                        <asp:ListItem Text="Papaya" />
                    </asp:CheckBoxList>
                </div>
            </ItemTemplate>
        </asp:Repeater>

 protected void chkAll_CheckedChanged(object sender, EventArgs e)
        {
            foreach (RepeaterItem item in rptCategory.Items)
            {
                CheckBoxList chkFruits = item.FindControl("chkFruits") as CheckBoxList;
                CheckBox chkAll = item.FindControl("chkAll") as CheckBox;
                foreach (ListItem item1 in chkFruits.Items)
                {
                    item1.Selected = chkAll.Checked;
                }
            }         
        }

        protected void chkFruits_SelectedIndexChanged(object sender, EventArgs e)
        {
            foreach (RepeaterItem item in rptCategory.Items)
            {
                CheckBoxList chkFruits = item.FindControl("chkFruits") as CheckBoxList;
                CheckBox chkAll = item.FindControl("chkAll") as CheckBox;

                bool isAllChecked = true;
                foreach (ListItem item1 in chkFruits.Items)
                {
                    if (!item1.Selected)
                    {
                        isAllChecked = false;
                        break;
                    }
                }
                chkAll.Checked = isAllChecked;
            }
            
        }

The result:

Best regards,

Sam

Hi, thanks for the reply. I would like to check if possible to perform using jQuery.

I managed to do perform the task of checking/unchecking of the parent checkbox and it will check/uncheck all the children.

 I can't think of how to do the following scenario

• checking all the children will result in the parent being auto-checked.
• once all the children are being checked, if the user now unchecked any of the children, it will result in the parent being uncheck.

My current jQuery

// onclick statement for asp:Checkbox

onclick='<%# "checkbox(this, " + DataBinder.Eval(Container.DataItem, "CategoryID") + ")" %>' 


<script type="text/javascript">       

       function checkbox(parentBox, catID) {
           if (parentBox.checked) {
               $(".child_" + catID + " input").attr("checked", "checked");
           }
           else {
               $(".child_" + catID + " input").removeAttr("checked");
               
           }
       }
   </script>

Answer 4

User288213138 posted

Hi bczm8703,

• checking all the children will result in the parent being auto-checked.
• once all the children are being checked, if the user now unchecked any of the children, it will result in the parent being uncheck.

My code above can still meet your requirement.

If you want to do it with jquery, then you need to traverse the repeater control, and then judge the status of checkbox and checkboxlist, which is more complicated than use the code behind.

Best regards,

Sam