5

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.

Community
  • 1
  • 1
Scott Rowley
  • 486
  • 1
  • 7
  • 30
  • 1
    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 Aug 15 '12 at 17:29
  • are you getting any errors in the console log? – laker Aug 15 '12 at 17:29
  • This is your code: http://jsfiddle.net/j2YdH/ seems to work? – Tim Aug 15 '12 at 17:30
  • 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 Aug 15 '12 at 17:30
  • 1
    `:checkbox` is deprecated http://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 Aug 15 '12 at 17:32
  • I tried changing :checkbox to [type='checkbox'] but it didn't work. I changed it to the ID as you mentioned though and that worked as well. Thanks all! – Scott Rowley Aug 15 '12 at 17:40

3 Answers3

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.

nbrooks
  • 18,126
  • 5
  • 54
  • 66
  • 1
    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 – wirey00 Aug 15 '12 at 17:35
  • Shows what I was missing (doc ready) and simplified it. Thanks very much! – Scott Rowley Aug 15 '12 at 17:37
  • @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. – nbrooks Aug 15 '12 at 17:38
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()
  })
})
Ram
  • 143,282
  • 16
  • 168
  • 197
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

James Kyburz
  • 13,775
  • 1
  • 32
  • 33