How to Get Value of Selected Radio Button Using jQuery

How to Get Value of Selected Radio Button Using jQuery

Admin
Admin・ 19 Agustus 2021
3 min read ・ 1530 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 🚀 🚀 🚀

 

Tinggalkan Komentar
Loading Comments