Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Code To Display Boxes Based On Radio Checkboxes Not Working

Post a Comment
I have found the following Code Snippet, but I cannot get it to work on this site or even a black test page, not sure what I am missing? JS Fiddle: http://jsfiddle.net/technologric

Solution 1:

Your script is dependent on JQuery, so we need to give access to it. In this case, I added a link in the line <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

Next, I moved your script to below the body and it worked perfectly. 

<html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body><p>Show textboxes
    <inputtype="radio"name="radio1"id="r1"value="Show">Do nothing
    <inputtype="radio"name="radio1"id="r2"value="Nothing"></p>Wonderful textboxes:
  <divclass="text"><p>Textbox #1
      <inputtype="text"name="text1"id="text1"maxlength="30"></p></div><divclass="text"><p>Textbox #2
      <inputtype="text"name="text2"id="text2"maxlength="30"></p></div></body><scripttype="text/javascript">
  $(document).ready(function () {
      $(".text").hide();
      $("#r1").click(function () {
          $(".text").show();
          document.getElementById("text").required = true;
      });
      $("#r2").click(function () {
          $(".text").hide();
          document.getElementById("text").required = false;
      });
  });
  </script></html>

Solution 2:

Instead of using click event for check box, you should use change event, click event always fire even if radiobutton is checked, but if you use change event it will only fire when radio button check (single time).

here is update js snippet: 

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

Thanks

Solution 3:

You need to Insert jquery in your page also you are using 

document.getElementById()

and id is text1 and text2 not text

<html><head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body><p>Show textboxes
        <inputtype="radio"name="radio1"id="r1"value="Show">Do nothing
        <inputtype="radio"name="radio1"id="r2"value="Nothing"></p>Wonderful textboxes:
        <divclass="text"><p>Textbox #1
        <inputtype="text"name="text1"id="text1"maxlength="30"required></p></div><divclass="text"><p>Textbox #2
        <inputtype="text"name="text2"id="text2"maxlength="30"required></p></div></body><scripttype="text/javascript">
        $(document).ready(function () {
            $(".text").hide();
            $("#r1").click(function () {
                $(".text").show();
                document.getElementById("text1").required = true;
            });
            $("#r2").click(function () {
                $(".text").hide();
                document.getElementById("text2").required = false;
            });
        });
        </script></html>

Post a Comment for "Code To Display Boxes Based On Radio Checkboxes Not Working"