CODEWITHSUNDEEP
javascriptjquery
Ankur Kushwaha
Ankur Kushwaha

Reputation: 51

How to show and hide div on the basis of radio button selection

I have two radio button on the selection of radio button it's should display div and hide div. Below is my script I don't understand why it's not working.

JavaScript

$(document).ready(function() {
  $(".text").show();
  $(".text1").hide();
  $("#r1").click(function() {
    $(".text").show();
    $(".text1").hide();
  });

  $("#r2").click(function() {
    $(".text1").show();
    $(".text").hide();
  });

});

HTML 

<p>Show textboxes
  <input type="radio" name="radio1" id="r1" checked value="Show" onClick="getResults()">Do nothing
  <input type="radio" name="radio1" id="r2" onClick="getResults()" value="Show">
</p> Wonderful textboxes:
<div  class="text">
  <p>Textbox #1
    <input type="text" name="text" id="text" maxlength="30">
  </p>
  <p>Textbox #2
    <input type="text" name="text" id="text" maxlength="30">
  </p>
</div>

<div class="text1">
  <p>Textbox #3
    <input type="text" name="text1" id="text1" maxlength="30">
  </p>
  <p>Textbox #4
    <input type="text" name="text2" id="text1" maxlength="30">
  </p>
</div>

here is jsfiddle link

Upvotes: 0

Views: 246

Answers (4)

sam orten
sam orten

Reputation: 206

use toggle method for hide and show go to following link https://www.w3schools.com/jquery/eff_toggle.asp

Upvotes: 0

Kapila Perera
Kapila Perera

Reputation: 857

your code is working fine after added the jquery reference. 

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

Use change() event handler to handle the change event and toggle the element state using toggle() method with a boolean argument.

$(document).ready(function() {
  // attach change event handler
  $("#r1,#r2").change(function() {
    // toggle based on the id
    $(".text").toggle(this.id == 'r1');
    $(".text1").toggle(this.id == 'r2');
    // trigger change event to hide initially
  }).first().change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Show textboxes
  <input type="radio" name="radio1" id="r1" checked value="Show">Do nothing
  <input type="radio" name="radio1" id="r2" value="Show">
</p> Wonderful textboxes:
<div class="text">
  <p>Textbox #1
    <input type="text" name="text" maxlength="30">
  </p>
  <p>Textbox #2
    <input type="text" name="text" maxlength="30">
  </p>
</div>

<div class="text1">
  <p>Textbox #3
    <input type="text" name="text1" maxlength="30">
  </p>
  <p>Textbox #4
    <input type="text" name="text2" maxlength="30">
  </p>
</div>

FYI : The attribute should be unique on the page, for a group of elements use class attribute otherwise only the first element with the id get selected while using id selector.

Upvotes: 2

Faraz Babakhel
Faraz Babakhel

Reputation: 664

Your Code is looking fine. make it sure that you add JQuery Properly

like 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".text").show();
  $(".text1").hide();
  $("#r1").click(function() {
    $(".text").show();
    $(".text1").hide();
  });

  $("#r2").click(function() {
    $(".text1").show();
    $(".text").hide();
  });

});
</script>

Upvotes: 0

Related Questions