Hide / Display Div Based On Checkbox Click. Works In JsFiddle, But Won't On My Site. Any Ideas?

Hide / Display div based on checkbox click. Works in jsFiddle, but won't on my site. Any ideas? What I'm looking to do is have multiple payment methods (CC, Paypal, etc, etc.) and

Solution 1:

It's because your script

  $('#CCMethod').change(function(){
      if ($(this).is(':checked')) {
        $('#CCPay').fadeIn('slow');
      } else {
        $('#CCPay').fadeOut('slow');
      }                   
    });

is running before #CCMethod is declared. Wrap it in a doc-ready:

$(function() {
    ('#CCMethod').change(function(){
      if ($(this).is(':checked')) {
        $('#CCPay').fadeIn('slow');
      } else {
        $('#CCPay').fadeOut('slow');
      }                   
    });
 });

Solution 2:

I'd recommend to use click event instead of change, change is buggy in old IE (jQuery probably handles this bug, but it's kinda good practice anyway). So try if click works for you.

If you don't care about IE<9, take a look at :checked pseudoselector. This option doesn't require javascript. Take a look here: http://jsfiddle.net/y9cQD/ (show/hide animation could be added via transition)

P.S. just noticed answer from J Torres - could be the cause.

Solution 3:

Change the line:

if (this.checked) {

for this:

if ($(this).is(':checked')) {

To check if a checkbox is checked, you must use the ':checked' jQuery selector.