CODEWITHSUNDEEP
javascripthtml
Elvalianon
Elvalianon

Reputation: 3

How to hide/show part of a form when checkbox is checked/unchecked?

I found a solution right here, works perfectly!

This is my first attempt of trying to hide and show a section of a form with javascript. I have 0 experience with javascript and tried this tutorial and this basic example on top of several other websites and tutorials over the last 2-3 hours, yet all fails to actually work.

I made a form with several radio's, a few text fields and a several checkboxes. I want some of these text fields to be invisible until you check a specific checkbox that will show them. I'd like to do this to several checkboxes for several text fields.

Example: You check the checkbox "Other" and a textfield appears to tell you to specify other in that field.

I narrowed my code down to just a small test below, since I do not wish to share all questions and wanted a simple way to figure out how to get it to work. I put the to be hiden/shown section in a div because I thought that might help it, according to the "basic exmaple", but it is not necessary to be in a div for my form.

Thank you in advance for your reply and apologies for my noobness :)

<!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>Untitled Document</title>
<script>
$("#yourCheckboxID").click(function ()
{
    if ($("#boxchecked").attr("checked"))
    {
        $("#hidden").show();
    }
    else
    {
        $("#hidden").hide();
    }              
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="box" />
      Main.</label>
    <br />
    <label>
      <input type="checkbox" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
      Other.</label>
    <br />
  </p>
</form>
<div id="hidden">Can you see this?</div>
</body>
</html>

Thank you!

Upvotes: 0

Views: 8124

Answers (4)

user10867046
user10867046

Reputation: 

<script>
$(document).ready(function () {
        $("#a").click(function () {
            if ($("#a").prop("checked")) {
                $("#b").hide();
                $("#c").hide();
                $("#d").hide();
                $("#e").hide();
            } else {
                $("#b").show();
                $("#c").show();
                $("#d").show();
                $("#e").show();
            }
        });
    });
<script>
<div><input id="a" type="checkbox"></div>
<div><input id="b" type="checkbox"></div>
<div><input id="c" type="checkbox"></div>
<div><input id="d" type="checkbox"></div>
<div><input id="e" type="checkbox"></div>

Upvotes: 0

manuerumx
manuerumx

Reputation: 1250

Another option is using the prop function from jQuery:

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
    $(document).ready(function(){
        $("#boxchecked").click(function (){
            if ($("#boxchecked").prop("checked")){
                $("#hidden").hide();
            }else{
                $("#hidden").show();
            }              
        });
    });
</script>

Upvotes: 0

Sebastian Olsen
Sebastian Olsen

Reputation: 10888

You can use CSS to achieve this, use psuedo selectors:

.inputs {
  display: none;
}

.foo:checked + .inputs {
  display: initial;
}
<form action="foo">
  <input type="checkbox" class="foo">
  <div class="inputs">
    bla blah inputs
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </div>
</form>

Upvotes: 2

RahulB
RahulB

Reputation: 2110

Use $("#boxchecked").is(':checked')

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

Fiddle link : https://jsfiddle.net/san6gc9c/

Upvotes: 0

Related Questions