jQuery checkbox event not firing?

Question

I have a page with checkboxes, one of which is a select all button. So when the user clicks select all, it checks all the other boxes, and when another box is clicked, it unchecks select 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 is loading jQuery fine, the first alert triggers. None of the click events give the alerts. I have double-checked my HTML is correct.

So am I using the wrong event for jQuery, or is there a possible conflict on my page with other javascript that isn't 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 the part of the page with the checkboxes is not visible when the page loads, but it is there in the HTML. I show the area after a button is clicked, but when the page loads, at first these checkboxes is invisible.

added, this code is a mess, all in tables, and whoops I pasted the smarty template code, not the rendered HTML, but I checked and it renders fine — tkotitan
– tkotitan, Commented Oct 29, 2009 at 17:54
also, technically my input fields are not in a <form> tag, if that matters. — tkotitan
– tkotitan, Commented Oct 29, 2009 at 17:57
click != change. Usually there are comments pointing out an error, like when incorrect advice is being given in an answer, like this one suggesting the click event: stackoverflow.com/a/3442342/664132 — basic6
– basic6, Commented Jan 9, 2015 at 9:39

Jan Willem B · Accepted Answer · 2009-10-29 17:57:42Z

1

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 any light on your problem?

answered Oct 29, 2009 at 17:57

Jan Willem B

3,8161 gold badge28 silver badges39 bronze badges

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

Comments

Ciantic · Accepted Answer · 2009-10-29 18:00:33Z

1

When you programmatically change the state of checkboxes you must also check the event change, click is not fired always:

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

since you have two functions you should do something like:

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

answered Oct 29, 2009 at 18:00

Ciantic

5,8144 gold badges61 silver badges50 bronze badges

1 Comment

tkotitan Over a year ago

Thanks for that, tried it, no luck. I think my page is such a mess of tables that maybe jQuery is losing it's mind looking at it?

Tarik · Accepted Answer · 2014-05-02 15:24:33Z

1

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

It looks fine but could you try this code now.

edited May 2, 2014 at 15:24

answered Oct 29, 2009 at 17:58

Tarik

82.2k86 gold badges243 silver badges351 bronze badges

Collectives™ on Stack Overflow

jQuery checkbox event not firing?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

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

Linked

Related