Home
Topics
Laravel

Laravel
Livewire

Livewire
Software Testing

Testing
bootstrap

Bootstrap
source code

Code
HTML

HTML
CSS

CSS
Javascript

Javascript
jQuery

jQuery
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 ・ 3308 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 🚀 🚀 🚀

Javascript HTML jQuery
Artikel Sebelumnya

Show and Hide DIV berdasarkan Radio Button yang Di...
Artikel Selanjutnya

Show Hide Div Based on Radio Button Selection Usin...
Tinggalkan Komentar
Loading Comments
Bookmark
Windows Linux Mac
Ctrl + D Ctrl + D ⌘ + D
Follow us
Favorit See All