How to Get Value of Selected Radio Button Using jQuery

Admin・ 19 Agustus 2021

3 min read ・ 2625 views

Sometimes we need to use radio buttons to make input options in our programs, such as gender choices. Well, to be able to get a value based on the selected radio button, there are several options, one of which is using jQuery.

With jQuery, to get the value of the selected radio button, we simply use the jQuery :checked selector. I will give 3 examples of how to get and display the value of the selected radio button.

Example 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>

Example 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>

Example 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>

Good luck and I hope this article can be useful. See you in the next article 🚀 🚀 🚀

Javascript HTML jQuery

Artikel Sebelumnya

Show Hide Div Based on Radio Button Selection Usin...

Artikel Selanjutnya

Easy Ways to Upload or Deploy Laravel Project to S...

Tinggalkan Komentar

Loading Comments

Favorit See All

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