Show Hide Div Based on Radio Button Selection Using jQuery

Show Hide Div Based on Radio Button Selection Using jQuery

Admin
Admin・ 19 Agustus 2021
5 min read ・ 6487 views

When creating or building a program, sometimes feature options are also needed. For example, in the contest participant registration form, there is a choice whether to register for yourself or register as a team. When the user selects the register option for himself then the user needs to input the username, but if the user registers as a team then the user needs to input the team name.

Well, in this article I will share some examples of how to show and hide a div based on the selected radio button using jQuery. To create such a feature, we can use the methods from jQuery, namely show() and hide(). Below I give 3 examples of how to create a show and hide div based on the value of the selected radio button, where at first we style all the div 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();
          });
        });
      </script>
    </center>
  </body>
</html> 
  • Example 2 (Add Alert)
<!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 3
<!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>

Good luck and I hope this article can be useful. See you in the next article 🚀🚀🚀

 

Tinggalkan Komentar
Loading Comments