Hide or show input field based on checkbox

Question

I got this script which works perfectly fine on fiddle, but not working on my website.

Code on site:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
});
</script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
</body>
</html>

"Not working" is no a description of a problem. Please read this: [MCVE] — Anders, Sep 16 '15 at 20:44

adrield · Answer 1 · 2015-09-16T20:43:35.893

You are executing

$(".hiddenInput").hide();

on the header, before the element is loaded. Try putting your script after the elements on body:

...
    <div class="option">
            <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
    <br/><div class="hiddenInput">Enter
    <input type="text" name="txtBox2"/></div>
</div>
<script type="text/javascript">
    $(".hiddenInput").hide();
    $(".showHideCheck").on("change", function() {
        $this = $(this);
        $input = $this.parent().find(".hiddenInput");
        if($this.is(":checked")) {
            $input.slideDown();
        } else {
            $input.slideUp();
        }
    });
</script>

OR setup a function to execute on load event:

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function start() {
        $(".hiddenInput").hide();
        $(".showHideCheck").on("change", function() {
            $this = $(this);
            $input = $this.parent().find(".hiddenInput");
            if($this.is(":checked")) {
                $input.slideDown();
            } else {
                $input.slideUp();
            }
        });
    }
</script>
</head>
<body onload="start()>
    ...
</body>

which is made with pure javascript. If you want a JQuery solution, @Buzinas answer is the way to do it — adrield, Sep 16 '15 at 20:45

score 0 · Accepted Answer · answered Sep 16 '15 at 20:39

The problem is that you're trying to use the elements before they are even loaded in the page. So, there are two simpler ways to solve your problem.

First

You can use the jQuery's document ready event:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // encapsulate your code into a function and pass it to jQuery
  $(".hiddenInput").hide();
  $(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
  });
});
</script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
</body>
</html>

Second

You can mantain your code intact, but put the script before the end of the body tag:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form>
    <div class="option">
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput"> Enter
        <input type="text" name="txtBox1"/></div>
    </div>
    <div class="option">
                <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />Click me to show the text box
        <br/><div class="hiddenInput">Enter
        <input type="text" name="txtBox2"/></div>
    </div>
</form>
<script type="text/javascript">
$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.slideDown();
    } else {
        $input.slideUp();
    }
});
</script>
</body>
</html>

@MohitChandak So, please, click in the arrow to upvote my answer, and then in the V to accept it :) — Buzinas, Sep 16 '15 at 20:49

score 0 · Answer 3 · answered Sep 16 '15 at 20:40

Wrap it in a document.ready:

$(document).ready(function(){

    $(".hiddenInput").hide();
        $(".showHideCheck").on("change", function() {
            $this = $(this);
            $input = $this.parent().find(".hiddenInput");
            if($this.is(":checked")) {
               $input.slideDown();
           } else {
              $input.slideUp();
           }
       });
 });

score 0 · Answer 4 · edited May 23 '17 at 11:44

Checkout jQuery JavaScript not working on Wordpress, confused about no-conflict mode syntax if your website happens to be a wordpress site.

If wordpress, try:

  jQuery(document).ready(function( $ ) {

   // $ Works! You can test it with next line if you like
   // console.log($);
   // put code here

   });

if you are not using wordpress, try this:

$( document ).ready(function() {
  // put code here
});

Hide or show input field based on checkbox

4 Answers4