How can I check dynamic checkboxes with jquery

Question

I am trying to find the easiest way to check change event checkboxes.

I created checkboxes with php script

PHP:

<div class="form-group">
    <div class="col-md-12 servicesCheck" style="margin-top:-10px">
        <?php
        foreach ($data["languageSchool"]["services"] as $service) {
            $required = "";
            $checked = "";
            if ($service["is_required"] == "1") {
                $required = "disabled";
                $checked = "checked";
            }
            echo "<div class='checkbox " . $required . "'>";
            echo "  <label><input id='services' type='checkbox' " . $checked . " " . $required . " value='" . $service["price"] . "'>" . $service["name"] . "</label>";
            echo "</div>";
        }
        ?> 
    </div> 
</div>

JQUERY:

$('#servicesCheck :checkbox').change(function () {
    // DO SOMETHING
});

What did I do wrong in my code.

@Xorifelse I confused class and id jquery selector. servicesCheck is class. — Arif Acar
– Arif Acar, Commented Nov 12, 2016 at 19:40

Alvaro · Accepted Answer · 2016-11-12 19:32:36Z

1

I think the jQuery selector is wrong. 'servicesCheck' in your HTML is a Class not an Id,

$('.servicesCheck input:checkbox').change(function () {
// DO SOMETHING
});

should work.

Although :checkbox works jQuery documentation says: "it is recommended to precede it with a tag name or some other selector"

answered Nov 12, 2016 at 19:32

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

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

Comments

Jaber · Accepted Answer · 2016-11-12 19:34:17Z

0

your php code will generate multiple checkbox with same ID. change it by adding an auto increment suffix.. and also you used #servicesCheck in jQuery code, which is not available in this code

answered Nov 12, 2016 at 19:34

Jaber

2672 gold badges10 silver badges30 bronze badges

1 Comment

Arif Acar Over a year ago

you right I just deal with fix it. echo " <label><input id='services" . $service["ID"] . "' type='checkbox'....

Community · Accepted Answer · 2017-05-23 12:09:07Z

0

Personally I find it easier to specifically target by name attribute as it must exist in the source code as likely multiple check-boxes need a different handling and not the same one.

If you have only 1, Alvaro's answer will suffice.

$('#myloginform input[name=mycheckboxname]:checked').change(function(){
  console.log($(this).attr('name'));
});

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Nov 12, 2016 at 19:45

Xorifelse

7,9411 gold badge29 silver badges38 bronze badges

Collectives™ on Stack Overflow

How can I check dynamic checkboxes with jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related