If checkbox is checked - show input field. Works in JSFiddle, not on website

checkbox, jquery, show-hide

Solution

Wrap your code in a loading event. This is the newer, preferred, syntax (rather than `$(window)` or `$(document)`):

$(function () {
    $('input[name="showthis"]').hide();

    //show it when the checkbox is clicked
    $('input[name="checkbox"]').on('click', function () {
        if ($(this).prop('checked')) {
            $('input[name="showthis"]').fadeIn();
        } else {
            $('input[name="showthis"]').hide();
        }
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/DLQY9/1/

Problem

I probably have been staring at this too long and am missing something obvious, but: why is this working fine in JSFiddle and NOT when I upload it?? The alert at the end is showing up on the test website, but the "showthis" is also visible no matter what. HTML ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Form Field</title> <script type="text/javascript" src="scripts/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="scripts/showfield.js"></script> </head> <body> <input type="checkbox" name="checkbox" id="checkbox" value="checkbox" /> <br /> <input id="showthis" name="showthis" size="50" type="text" value="text here"/> </body> </html> ``` jQuery (I've downloaded a minified jQuery 1.11.0 , which is what's working in JSFiddle) ``` //hide field by default $('input[name="showthis"]').hide(); //show it when the checkbox is clicked $('input[name="checkbox"]').on('click', function(){ if ( $(this).prop('checked') ) { $('input[name="showthis"]').fadeIn(); } else { $('input[name="showthis"]').hide(); } }); // the alert is showing fine alert ("hello"); ``` JSFiddle http://jsfiddle.net/DLQY9/

Original source