jQuery click event on checkbox not working

Question

I have the following code that I'm trying to get working. What I want is to have the table rows with class "generator" show up if the checkbox is checked and removed if it is unchecked (default). I have tested jquery and I know it is loading ok so that is not the issue.

The following is my code that I have tried to adapt from jQuery checkbox event handling:

<script>
$('#gen_form input:checkbox').click(function() {
    var $this = $(this);
    // $this will contain a reference to the checkbox   
    if ($this.is(':checked')) {
        $(".generator").toggle();
    } else {
        $(".generator").toggle();
    }
});
</script>


      <?php if(isset($msg)){ echo "<span id='msg'>".$msg."</span>"; }?>
      <h2>Add CLLI</h2>
      <form method="post" id='gen_form'>
        <table class="form_table_newuser">
         <tr>
          <td class='tdl'>Generator</td><td class='tdr'><input type='checkbox' id='showGen' name='generator' /></td><td>&nbsp;</td>
         </tr>
         <tr class='generator'>
          <td class='tdl'>Start Time</td><td class='tdr'><input type='text' name='start_time' class='textbox'/></td><td>&nbsp;<span class='error'>*<?php echo $errors['start_time']; ?></span></td>
         </tr>
         <tr class='generator'>
          <td class='tdl'>End Time</td><td class='tdr'><input type='text' name='end_time' class='textbox'/></td><td>&nbsp;<span class='error'>*<?php echo $errors['end_time']; ?></span></td>
         </tr>

I'm still pretty new to jQuery and am learning. Everything I have tried with the checkbox checking has failed. I can use a button and it worked (with different code), but I need to be able to use the checkbox. I tried a few more things before posting this that say they all deal with the checkbox but none of them have done anything at all when clicking the checkbox.

Looking at this code, there's nothing wrong with it. You're probably not including the $(function or $(document).ready(function() call, or you're not including the library. — Ohgodwhy
– Ohgodwhy, Commented Aug 15, 2012 at 17:29
Yeah it's working fine Scott, check the console, also do a quick $.fn.jQuery in the console to see if & what version of jQuery you have — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Aug 15, 2012 at 17:30
:checkbox is deprecated api.jquery.com/category/deprecated.. you should use [type='checkbox'] instead now.. also your checkbox has an ID so use that to select it — wirey00
– wirey00, Commented Aug 15, 2012 at 17:32

nbrooks · Accepted Answer · 2012-08-15 17:28:43Z

10

You need to wrap the function in a document ready callback, otherwise the elements don't exist at the time the handler is bound:

$(document).ready(function() {
    $('#gen_form input:checkbox').click(function() {
        $(".generator").toggle(); // simplifies to this
    });
});

Also, jQuery .toggle() handles hiding/showing alternately for you.

answered Aug 15, 2012 at 17:28

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

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

3 Comments

wirey00 Over a year ago

You should pass a condition inside the toggle button to ensure which state it should be in.. ex. $(".generator").toggle(this.checked) true meaning show.. false meaning hide

Scott Rowley Over a year ago

Shows what I was missing (doc ready) and simplified it. Thanks very much!

nbrooks Over a year ago

@wirey That shouldn't be necessary, since presumably every click will change whether or not the the box is checked (i.e. toggle its state), and calling .toggle() with no parameters simply toggles the visibility of elements (jq docs). In truth .change() would be a better function than .click() for this purpose, but it shouldn't matter in this case. So the first click hides, next click shows, etc.

Ram · Accepted Answer · 2012-08-15 17:38:46Z

2

Try putting your code inside the $(document).ready handler, according to the structure of your markup, it sounds that you just want to select one input element, try the following:

$(document).ready(function(){
  $('#showGen').change(function(){
      $('.generator').css('display', this.checked ? 'block' : 'none');
      // or $('.generator').toggle()
  })
})

edited Aug 15, 2012 at 17:38

answered Aug 15, 2012 at 17:31

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

James Kyburz · Accepted Answer · 2012-08-15 17:30:58Z

1

It is because the dom is not ready, your script runs before the elements exist.

If you wrap your script in jQuery's document ready like so it will work :-

$(function(){
  $('#gen_form input:checkbox').click(function() {
    var $this = $(this);
    // $this will contain a reference to the checkbox   
    if ($this.is(':checked')) {
      $(".generator").toggle();
    } else {
      $(".generator").toggle();
    }
  });
});

I tried it in jsFiddle and it worked

answered Aug 15, 2012 at 17:30

James Kyburz

14.6k1 gold badge34 silver badges33 bronze badges

1 Comment

Scott Rowley Over a year ago

It does indeed, I didn't -1 you but I'll +1 you to at least give that back to ya. Thanks!

Collectives™ on Stack Overflow

jQuery click event on checkbox not working

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related