jQuery if checkbox is selected do this

Question

I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...

$(document).ready(function(){
        if($("#upload_yes").is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }

        if($("#new_info_yes").is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    });

This is a genuine question, and although it might be simpler than others, the poster is trying to seek help and even has code that he believes should be working (let's face it, that's not very often with q's resembling this), and I don't think this should be down voted. — Charlie, Aug 08 '12 at 00:35
possible duplicate of [jquery checkbox event handling](http://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling) — Felix Kling, Aug 08 '12 at 00:36
I searched for at least 45 minutes on this one thing. I don't understand how you can down vote, my code looks absolutely nothing like the one on the post you linked to. — Ty Bailey, Aug 08 '12 at 00:41
Yeah, I agree with @Charlie...just because someone is new to a particular technology doesn't mean their question is invalid (I'm going to compensate by voting you up!). — Prisoner ZERO, Aug 08 '12 at 00:41
Was your comment directed at me? No worries, I did not down-vote. And I think that you are asking the same as the other question (how to do something when the checkbox state changes), that's why I voted to close it as duplicate. — Felix Kling, Aug 08 '12 at 00:43

score 4 · Answer 1 · answered Aug 08 '12 at 00:34

4

You aren't binding this code to the proper event:

$(document).ready(function() {
  $("#upload_yes").on('change', function() {
    if ($(this).is(':checked')) {
      $("#upload_form").show();
      $("#new_info_form").slideDown(500);
    } else {
      $("#upload_form, #new_info_form").hide();
    }
  });
});

answered Aug 08 '12 at 00:34

Blender

289,723
53
439
496

To add to this: the reason the OP's code isn't working is because it is bound to the document.ready (and so it only checks the status one time, when the document is ready). You need to bind the code to an actual event that will trigger the code. – JamesSwift Aug 08 '12 at 01:11

Johnny5 · Accepted Answer · 2012-08-08T01:14:44.103

See this fiddle

You must do the job in the change event.

then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.

The code :

$(document).ready(function(){

    $('input#upload_yes').change(function(){
        if($(this).is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }
    });

    $('input#new_info_yes').change(function(){
         if($(this).is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    });

    //Trigger the change event so the divs are initially shown or hidden.
    $('input[type=checkbox]').trigger('change');

});

The _event_ works without trigger, but calling trigger make the div initially hide if the checkbox is not initially checked. — Johnny5, Aug 08 '12 at 01:15

Oscar Jara · Answer 3 · 2012-08-08T00:48:48.880

To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.

Well, this is the correct way :-)

(I tried to reduce code)

Live Demo:

http://jsfiddle.net/oscarj24/RSDRg/

Code:

$(document).ready(function() {
  $('#upload_yes').on('change', function() {
     var done = $(this).is(':checked');
     if(done) {
       $('#upload_form').show();
       $('#new_info_form').slideDown(500);
     } else {
       var frm = $('#upload_form').add('#new_info_form');
       frm.hide();
     }
  });
});

`($(this).is(':checked')) ? true : false;` is redundant. `$(this).is(':checked')` already returns a boolean. — Blender, Aug 08 '12 at 00:47

jQuery if checkbox is selected do this

3 Answers3