CheckBox check all child checkBox on check

Question

I simply wanna check all child checkBox when parent is check and uncheck when parent is uncheck.

THX

<div class="modal-body">

            @for (int i = 0; i < Model.Count; i++)
            {
                @Html.HiddenFor(m => Model[i].Id)
                <div id="@Model[i].Name" class="row" style="width:300px;">
                    <div>
                        <span data-toggle="collapse" class="glyphicon glyphicon-chevron-down" data-target="#@Model[i].Id"> </span>
                        @Html.Label(Model[i].Name + "("+ (Model[i].LicensesTotal - Model[i].LicensesUsed).ToString()+"/" + Model[i].LicensesTotal.ToString()))


                        @Html.CheckBoxFor(x => Model[i].Assigned, new { @class = "pull-right",  @id = @Model[i].Name.ToString() })
                    </div>
                    <div id="@Model[i].Id" class="collapse">


                        @for (int i2 = 0; i2 < Model[i].Plans.Count; i2++)
                        {
                            <div>
                                <div>
                                    @Html.Label(Model[i].Plans[i2].Name)
                                    @Html.CheckBoxFor(x=> Model[i].Plans[i2].Assigned, new { @class = "pull-right" })
                                </div>
                            </div>
                        }
                    </div>
                    <hr/>
                </div>

            }

</div>

Its dynamically generated so you cant assume the html result will be always the same... — FrankSharp
– FrankSharp, Commented Jun 6, 2016 at 14:57

Anoop Joshi P · Accepted Answer · 2016-06-06 15:02:14Z

1

Add a special class to the parent checkbox like this,

 @Html.CheckBoxFor(x => Model[i].Assigned, new { @class = "pull-right parent",  @id = @Model[i].Name.ToString() })

Then your code will be,

$(".parent").change(function() {
  $(this).closest(".row").find(".collapse :checkbox").prop("checked", this.checked);
});

find the parent div with class row using closest(".row")
Get all the checkboxes inside the div collapse using .find(".collapse :checkbox") (Find will search for the child elements)

edited Jun 6, 2016 at 15:02

answered Jun 6, 2016 at 14:59

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

FrankSharp Over a year ago

I have this $(":checkbox").change(function (e) to detect the Id

Anoop Joshi P Over a year ago

@FrankSharp then add a special class to the parent checkbox.

Anoop Joshi P Over a year ago

@FrankSharp see the answer now.

FrankSharp Over a year ago

The class event is detected but $(this).closest(".row").find(".collapse :checkbox").prop("checked", this.checked); not work

Anoop Joshi P Over a year ago

try alert((this).closest(".row").find(".collapse :checkbox").length) and let me know the result

|

Collectives™ on Stack Overflow

CheckBox check all child checkBox on check

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related