Show and Hide DIV berdasarkan Radio Button yang Dipilih Menggunakan jQuery

Admin・ 19 Agustus 2021

4 min read ・ 3199 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 🚀🚀🚀

Javascript HTML jQuery

Artikel Sebelumnya

Upload Image Menggunakan Laravel Media Library by...

Artikel Selanjutnya

Mendapatkan Nilai Berdasarkan Radio Button Yang Di...

Tinggalkan Komentar

Loading Comments

Favorit See All

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