<asp:Checkbox>'s jQuery click() event not firing

Question

I have an ASP.NET-rendered CheckBox. When clicked, I want jQuery to capture the event, but for some reason it is not working.

This is what I'm doing so far:

ASP.NET

<table>
 <tr>
  <td>
   <asp:CheckBox runat="server" ClientIDMode="Static" 
                 id="testcb" name="testcb" />
  </td>
 </tr>
</table>

jQuery

$("#testcb").click(function () {
    if ($(this).is(':checked')) alert("checked");
});

Here is the source code from the browser:

<tr>
 <td>
  <span name="testcb">
   <input id="testcb" type="checkbox" 
          name="ctl00$ctl00$bodyContent$phMainContent$testcb">
  </span>
 </td>
</tr>

What version of jQuery are you using? That code appears to work perfectly for me. See the following jsFiddle: jsfiddle.net/TroyAlford/9za2p/0 — Troy Alford
– Troy Alford, Commented Nov 29, 2012 at 20:50
Please take a look at the HTML which your code is generating, and update your answer with that included. — Troy Alford
– Troy Alford, Commented Nov 29, 2012 at 20:57
I have updated jsfiddle.net/TroyAlford/9za2p/1 to reflect that code - and my result is the same. Please confirm whether the jsfiddle I'm linking works for you as-intended? Also, please confirm that you are putting the jQuery portion inside of a $(document).on('load' ...) or something similar. — Troy Alford
– Troy Alford, Commented Nov 29, 2012 at 21:35

Troy Alford · Accepted Answer · 2012-11-29 21:43:08Z

4

I believe the issue is likely that your jQuery script is being fired before the element in question is rendered.

Try the following:

<script type="text/javascript">
  $(document).on('ready', function () {
      $("#testcb").on('click', function () {
          var $cb = $(this);
          if ($cb.is(':checked')) {
              alert("checked");
          }
      });
  });
</script>

Without the $(document).on('ready' ... portion, you are not guaranteed that the document is fully rendered in the browser prior to .click() being bound. In addition, .on() should work even on elements that do not exist prior to it being called (similar to the old .live() function in previous versions of jQuery).

Please see this jsFiddle as an example.

answered Nov 29, 2012 at 21:43

Troy Alford

27.3k11 gold badges67 silver badges85 bronze badges

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

2 Comments

SkyeBoniwell Over a year ago

worked perfectly! How did you figure this out? I've spent way too many hours trying to get this to work. Thanks! :)

Troy Alford Over a year ago

lol - I've done the exact same thing -many- times. :) Hours later, I suddenly remember, and /facepalm. :) Glad it resolved the issue.

Anujith · Accepted Answer · 2012-11-30 10:07:46Z

2

You can try this:

$(document).ready(function() {
  $("#testcb").click(function(){
    if ($(this).attr("checked") == "checked"){
      alert("checked");
    } else {
      alert("unchecked");
    }
  });
});

edited Nov 30, 2012 at 10:07

answered Nov 29, 2012 at 20:12

Anujith

9,3686 gold badges35 silver badges48 bronze badges

1 Comment

SkyeBoniwell Over a year ago

I understand the if/else...great addition. But for some reason, nothing is happening when clicking the checkbox.

Pow-Ian · Accepted Answer · 2012-11-29 20:26:20Z

1

Since an ASP check box actually resolves to a span and an input you probably want to check the first child of the check box:

$("#testcb").click(function () {
        if ($(this).children(':first').is(':checked')) alert("checked");
 });

EDIT:

I usually set an onclick in the declaration of the check box so I am not sure if this will work but try this:

$("#testcb").children(':first').click(function () {
        alert('fire!');
        if ($(this).is(':checked')) alert("checked");
 });

edited Nov 29, 2012 at 20:26

answered Nov 29, 2012 at 19:46

Pow-Ian

3,6351 gold badge25 silver badges32 bronze badges

1 Comment

SkyeBoniwell Over a year ago

Thanks for the code and I see what you are saying, and I made the changes, but it still does nothing when I click the checkbox on or off.

Collectives™ on Stack Overflow

<asp:Checkbox>'s jQuery click() event not firing

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related