Dynamically adding click event to checkbox, only works for first checkbox JQUERY

Question

So I am working with a couple ascx with different checkbox areas on each control. I originally used

 $('[type=checkbox]').click ( function(){ code });

and it did the job, At first. But when i added another control, also using checkboxes, the function was firing for the other checkboxes as well so i upgraded the js to

 $('#chck').click(function(){ code });

But with this, it only fires an event for the first checkbox in that list.. how can i get it to fire for all clicks?

I have also tried this:

 $('#chck').each(function(){ $(this).click({ function() { code }); });

and this only worked for the first one as well

here is my ascx page example:

 <asp:Repeater ID="contacts" runat="server">
            <ItemTemplate>
                <tr>
                    <td>
                        <input type="checkbox" id="chck" />
                    </td>
                  .....
                 </tr>
             </ItemTemplate>
  </asp:Repeater>

and here is my JS code segment

    $(document).ready(function(){
       $("#chck").each(function () {
           $(this).click(function () { onchange($(this)); });
       });
    });
    function onchange(checkbox) {
    // adds contact to list
    }

You should never have multiple of an id. Use a class for that — Jeff Shaver
– Jeff Shaver, Commented Mar 8, 2013 at 17:50

James Montagne · Accepted Answer · 2013-03-08 17:51:23Z

3

ids must be unique. Use a class instead:

<input type="checkbox" class="chck" />

$('.chck').click(function(){ code });

answered Mar 8, 2013 at 17:51

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

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

2 Comments

DWolf Over a year ago

yep, that'll fix it.. i figured since it was in a repeater n it didn't give a warning or an error, that it was ok.

James Montagne Over a year ago

You can do all kinds of things in .net without compilation errors/warnings that will produce completely invalid html.

Jai · Accepted Answer · 2013-03-08 18:00:44Z

1

See using same ids for multiple elems on a same page is invalid.

IDs should be unique to each element. When this happens browser only selects first of it.

To overcome this issue one must change id to class. So you have to do same thing with your markup change id to class:

<input type="checkbox" class="chck" /> // <----change id to class for every input

and now your script should be:

$('.chck').each(function(){ //<-----use '.' notation for class selectors 
     $(this).click(function() { 
         onchange($(this));
     }); 
});

answered Mar 8, 2013 at 18:00

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Dynamically adding click event to checkbox, only works for first checkbox JQUERY

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related