Geek Answers Handbook

JQuery checkbox event not firing?

I have a page with checkboxes, one of which is the "Select All" button. Therefore, when the user clicks the "Select All" button, he checks all other fields, and when you click another window, he deselects all. Here is the code.

$(document).ready(function(event){ //alert('wtf'); $('#mailSubscribeAll').click(function(event){ //alert('wtf'); $('.mailingCheckbox').attr('checked','checked'); }); $('.mailingCheckbox').bind('click',function(event){ //alert('wtf'); $('#mailSubscribeAll').removeAttr('checked'); }); });

So, my page loads jQuery in order, the first warning triggers. None of the click events give a warning. I double-checked my HTML correctly.

So am I using the wrong event for jQuery, or is there a possible conflict on my page with another javascript that is not jQuery?

HTML snippet:

  <tr> <td class="CBT3" colspan="3" height="29"> <input type="checkbox" class="mailingCheckbox" id="mailNewsAlerts" value="1" {if $smarty.session.profile.mailNewsAlerts}checked{/if} onclick="subscribeMarkProfile()"> <label for="mailNewsAlerts"><b>News Alerts</b> - <cite>The latest breaking news from XXXXXXX</cite></label> </td> </tr> <tr> <td class="CBT3" colspan="3" height="29"> <input type="checkbox" id="mailSubscribeAll" value="1" {if $smarty.session.profile.mailSubscribeAll}checked{/if} > <label for="mailSubscribeAll"><b>Subscribe me to all XXXXX newsletters!</b> </label> </td> </tr>

I'm going to also add part of the page when the checkboxes are not visible when the page loads, but it is in the HTML. I show the area after clicking the button, but when the page loads, first these flags are invisible.

+4
source share
3 answers

It works as expected for me with the following code:

 <div> <input type="checkbox" id="mailSubscribeAll"/> <input type="checkbox" class="mailingCheckbox"/> <input type="checkbox" class="mailingCheckbox"/> </div> <script type="text/javascript"> $(document).ready(function(event){ $('#mailSubscribeAll').click(function(){ $('.mailingCheckbox').attr('checked','checked'); }); $('.mailingCheckbox').click(function(){ $('#mailSubscribeAll').removeAttr('checked'); }); }); </script>

Does this shed light on your problem?

+1
source 
  $("input:checkbox #mailSubscribeAll").click(function(event){ $('.mailingCheckbox').attr('checked','checked'); });

It looks great, but you can try this code now.

+1
source

When programmatically changing the state of the flags, you should also check the change event, the click does not always start:

 $('.mailingCheckbox').bind('change', ...

since you have two functions, you should do something like:

 function changeMailingCheckbox(...) { ... } $('.mailingCheckbox').bind('change', changeMailingCheckbox) $('.mailingCheckbox').bind('click', changeMailingCheckbox)
+1
source

More articles:


All Articles