CODEWITHSUNDEEP
javascriptjquery
Vijai Pandey
Vijai Pandey

Reputation: 159

How to select all the divs inside selected element

Here is my HTML code

<div class="panel-body">
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p>

    <div class="input-group"><span class="input-group-addon">
        <span><input checked="checked" name="manage_group" type="checkbox" value="1"></span>
        <span class="form-control">Create/manage groups of candidates</span
    </div>

    <div class="input-group"><span class="input-group-addon">
        <span><input checked="checked" name="manage_candidate" type="checkbox" value="1"></span>
        <span class="form-control">Modify candidate details</span>
    </div>
</div>

I want to Check all the checkboxes (WITHIN the parent div only) if 'select_all' checkbox is checked and uncheck all if the 'select_all' is unchecked.

Here is my jquery code:

$(".panel-body p input[type='checkbox']").click(function() {
    if(this.checked){
        //alert('Checked');
        var selected = this.closest(".panel-body");
        $(selected+"div input[type='checkbox']").each(function () {
            alert ('Hi');
        });
    }else{
    }
});

But it is not working. It is not accepting 'selected' variable inside the selector. How to select all checkboxes within the selected element?

Upvotes: 1

Views: 184

Answers (2)

BenG
BenG

Reputation: 15164

Your problem is this line:-

this.closest(".panel-body");

where this is the element and not the jQuery object.

You can achieve what you want like so:-

$(".panel-body p input[type='checkbox']").change(function() {
    var selected = $(this).closest(".panel-body");
    selected.find("div input[type='checkbox']").prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <p>
    <input name="select_all" type="checkbox" value="1">Select/Deselect All</p>

  <div class="input-group"><span class="input-group-addon">
            <input checked="checked" name="manage_group" type="checkbox" value="1"></span>
    <span class="form-control">Create/manage groups of candidates</span>
  </div>

  <div class="input-group"><span class="input-group-addon">
            <input checked="checked" name="manage_candidate" type="checkbox" value="1"></span>
    <span class="form-control">Modify candidate details</span>
  </div>

</div>

Upvotes: 4

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You can do it like following. Find all checkbox in closest .panel-body and change checked property based on select_all status.

$(":checkbox[name=select_all]").change(function () {
    $(this).closest('.panel-body').find(':checkbox').not(this).prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p>

    <div class="input-group">
        <span class="input-group-addon">
            <input checked="checked" name="manage_group" type="checkbox" value="1">
        </span>
        <span class="form-control">Create/manage groups of candidates</span>
    </div>
    <div class="input-group">
        <span class="input-group-addon">
            <input checked="checked" name="manage_candidate" type="checkbox" value="1">
        </span>
        <span class="form-control">Modify candidate details</span>
    </div>
</div>

Upvotes: 1

Related Questions