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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
  </p>Wonderful textboxes:
  <div class="text">
    <p>Textbox #1
      <input type="text" name="text1" id="text1" maxlength="30">
    </p>
  </div>
  <div class="text">
    <p>Textbox #2
      <input type="text" name="text2" id="text2" maxlength="30">
    </p>
  </div>
</body>
<script type="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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
        </head>
        <body>

        <p>Show textboxes
        <input type="radio" name="radio1" id="r1" value="Show">Do nothing
        <input type="radio" name="radio1" id="r2" value="Nothing">
        </p>Wonderful textboxes:
        <div class="text">
        <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30" required>
        </p>
        </div>
        <div class="text">
        <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30" required>
        </p>
        </div>
        </body>
    <script type="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>

You may like these posts

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