Show and Hide DIV berdasarkan Radio Button yang Dipilih Menggunakan jQuery

Show and Hide DIV berdasarkan Radio Button yang Dipilih Menggunakan jQuery

Admin
Admin・ 19 Agustus 2021
4 min read ・ 3422 views

Saat membuat atau membangun suatu progam, terkadang juga diperlukan fitur pilihan. Contohnya seperti formulir pendaftaran peserta lomba, terdapat pilihan apakah mendaftar untuk diri sendiri atau mendaftar sebagai tim. Ketika user memilih opsi mendafatar untuk diri sendiri maka user perlu input nama user tersebut, tapi jika user mendafar sebagai tim maka user tersebut perlu input nama timnya.

Nah, di artikel ini saya akan membagikan beberapa contoh cara show and hide div berdasarkan radio button yang dipilih menggunakan jQuery. Untuk membuat fitur seperti itu, kita bisa menggunakan method dari jQuery yaitu show() dan hide(). Di bawah ini saya memberikan 3 contoh bagaimana cara membuat show and hide div berdasarkan nilai dari radio button yang dipilih, dimana pada awalnya semua div tersebut kita beri style display:none.

  • Contoh 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> 
  • Contoh 2 (Tambahan 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> 
  • Contoh 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>

Selamat mencoba dan semoga artikel ini bisa bermanfaat. Sampai jumpa di artikel berikutnya 🚀🚀🚀

Tinggalkan Komentar
Loading Comments