Codelapan
  • Home
  • Bootstrap
  • Codeigniter
  • Katalon
  • Laravel
    • Home
    Topics
    Laravel

    Laravel
    Livewire

    Livewire
    Software Testing

    Testing
    bootstrap

    Bootstrap
    source code

    Code
    HTML

    HTML
    CSS

    CSS
    Javascript

    Javascript
    jQuery

    jQuery

    Codelapan
    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 🚀 🚀 🚀

    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
    Favorit See All