Mendapatkan Nilai Berdasarkan Radio Button Yang Dipilih Menggunakan jQuery

Mendapatkan Nilai Berdasarkan Radio Button Yang Dipilih Menggunakan jQuery

Admin
Admin・ 19 Agustus 2021
3 min read ・ 4124 views

Terkadang kita perlu menggunakan radio button untuk membuat opsi input di program yang kita buat, seperti pilihan gender. Nah, untuk bisa mendapatkan nilai berdasarkan radio button yang dipilih ada beberapa opsi, salah satunya yaitu dengan menggunakan jQuery.

Dengan jQuery, untuk mendapatkan nilai radio button yang dipilih, kita cukup menggunakan jQuery :checked selector. Saya akan memberikan 3 contoh bagaimana cara mendapatkan dan menampilkan nilai dari radio button yang dipilih. 

Contoh 1

<!DOCTYPE html>
<html>
  <head>
    <title>How to Get Value of Selected Radio Button Using jQuery</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style type="text/css">
      .select {
        color: #fff;
        padding: 30px;
        margin-top: 30px;
        width: 100%;
      }

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

  <body>
    <center>
      <h1>Codelapan</h1>
      <p>How to Get Value of Selected Radio Button 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>
      <p><input type="button" value="Get Value" /></p>
      <script>
        $(document).ready(function () {
          $("input[type='button']").click(function () {
            var radioValue = $("input[name='type']:checked").val();
            if (radioValue) {
              alert("result: you choose " + radioValue);
            }
          });
        });
      </script>
    </center>
  </body>
</html>

Contoh 2

<!DOCTYPE html>
<html>
  <head>
    <title>How to Get Value of Selected Radio Button Using jQuery</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style type="text/css">
      .select {
        color: #fff;
        padding: 30px;
        margin-top: 30px;
        width: 100%;
      }

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

  <body>
    <center>
      <h1>Codelapan</h1>
      <p>How to Get Value of Selected Radio Button Using jQuery</p>
      <div>
        <label><input type="radio" name="type" class="type" value="single" />Single</label>
        <label><input type="radio" name="type" class="type" value="team" />Team</label>
      </div>
      <p><input type="button" value="Get Value" /></p>
      <script>
        $(document).ready(function () {
          $("input[type='button']").click(function () {
            var radioValue = $(".type:checked").val();
            if (radioValue) {
              alert("result: you choose " + radioValue);
            }
          });
        });
      </script>
    </center>
  </body>
</html>

Contoh 3

<!DOCTYPE html>
<html>
  <head>
    <title>How to Get Value of Selected Radio Button Using jQuery</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style type="text/css">
      .select {
        color: #fff;
        padding: 30px;
        margin-top: 30px;
        width: 100%;
      }

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

  <body>
    <center>
      <h1>Codelapan</h1>
      <p>How to Get Value of Selected Radio Button Using jQuery</p>
      <div>
        <label><input type="radio" name="type" class="type" value="single" />Single</label>
        <label><input type="radio" name="type" class="type" value="team" />Team</label>
      </div>

      <script>
        $(document).ready(function () {
          $(".type").change(function () {
            var radioValue = $(".type:checked").val();
            if (radioValue) {
              alert("result: you choose " + radioValue);
            }
          });
        });
      </script>
    </center>
  </body>
</html>

Selamat mencoba dan saya harap artikel ini bisa membantu kamu. Sampai jumpa di artikel berikutnya 🚀 🚀 🚀

Tinggalkan Komentar
Loading Comments