Show Hide Div Based on Radio Button Selection Using jQuery

Admin・ 19 Agustus 2021

5 min read ・ 9438 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 🚀🚀🚀

Javascript HTML jQuery

Artikel Sebelumnya

Mendapatkan Nilai Berdasarkan Radio Button Yang Di...

Artikel Selanjutnya

How to Get Value of Selected Radio Button Using jQ...

Tinggalkan Komentar

Loading Comments

Favorit See All

Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly
23 Oktober 2021 65579 views
Laravel 8: REST API Authentication dengan Sanctum
17 September 2021 31644 views
Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap
14 Oktober 2021 29582 views
Membuat REST API CRUD di Laravel 8 dengan Sanctum
18 September 2021 28216 views
Contoh Cara Menggunakan Sweet Alert di Laravel 8
27 Agustus 2021 27270 views