Show Hide Div Based on Radio Button Selection Using jQuery

#webdev #javascript #html #css

When creating or building a program, sometimes a radio input type is required. For example, in the contest participant registration form, there is an option to register as a person or register as a team. When the user selects the register option for personal then the user needs to enter the username, but if the user register as a team then the user need to enter the team name.

Well, in this post I will share an example of how to show and hide a div based on the selected radio button using jQuery. To create this feature, we can use the methods from jQuery, namely show() and hide().

Below I give an example of how to create a show and hide div based on the value of the selected radio button, where at first we create all the style divs with display:none.

Example 1.

<!DOCTYPE html>
<html>
  <head>
    <title>Show and Hide div elements using radio buttons</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style type="text/css">
      .select {
        color: #fff;
        padding: 30px;
        display: none;
        margin-top: 30px;
        width: 100%;
      }

      label {
        margin-right: 20px;
      }
    </style>
  </head>

  <body>
    <center>
      <h1>Codelapan</h1>
      <p>Show and Hide div based on radio button selection using jquery</p>
      <div>
        <label><input type="radio" name="type" value="single" />Single</label>
        <label><input type="radio" name="type" value="team" />Team</label>
      </div>
      <div class="single select">
        <label style="color: black">Your Name:</label>
        <input type="text" placeholder="Your Name" />
      </div>
      <div class="team select">
        <label style="color: black">Your Team Name:</label>
        <input type="text" placeholder="Your Team Name" />
      </div>

      <script type="text/javascript">
        $(document).ready(function () {
          $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value");
            var target = $("." + inputValue);
            $(".select").not(target).hide();
            $(target).show();
            alert("Radio button '" + inputValue + "' is selected");
          });
        });
      </script>
    </center>
  </body>
</html>

Example 2.

<!DOCTYPE html>
<html>
  <head>
    <title>Show and Hide div elements using radio buttons</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style type="text/css">
      .single {
        display: block;
      }

      .team {
        display: none;
      }

      .select {
        color: #fff;
        padding: 30px;
        margin-top: 30px;
        width: 100%;
      }

      label {
        margin-right: 20px;
      }
    </style>
  </head>

  <body>
    <center>
      <h1>Codelapan</h1>
      <p>Show and Hide div based on radio button selection using jquery</p>
      <div>
        <label><input type="radio" name="type" value="single" checked/>Single</label>
        <label><input type="radio" name="type" value="team" />Team</label>
      </div>
      <div class="single select" id="single">
        <label style="color: black">Your Name:</label>
        <input type="text" placeholder="Your Name" />
      </div>
      <div class="team select" id="team">
        <label style="color: black">Your Team Name:</label>
        <input type="text" placeholder="Your Team Name" />
      </div>

      <script type="text/javascript">
        $('input[type="radio"]').click(function () {
          var inputValue = $(this).attr("value");
          if (inputValue == "team") {
            $("#single").hide();
            $("#team").show();
          } else {
            $("#team").hide();
            $("#single").show();
          }
        });
      </script>
    </center>
  </body>
</html>

visit Codelapan.com for more posts and follow us on Twitter.com/codelapan to get the latest information from us. Thanks

DEV Community

Show Hide Div Based on Radio Button Selection Using jQuery

Top comments (0)