Question 190721 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to check which radio button was selected by the user using javascript

I have a code that I got from bootstrap and I want to know how to get the value of the radio button when the user clicks on it.

<div class="d-flex justify-content-center">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
            <label class="form-check-label" for="inlineRadio1">5 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
            <label class="form-check-label" for="inlineRadio2">4 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
            <label class="form-check-label" for="inlineRadio3">3 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
            <label class="form-check-label" for="inlineRadio3">2 stars</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
            <label class="form-check-label" for="inlineRadio3">1 star</label>
          </div>
        </div>
Tags:

3

Answers


  1. 0

    You can attach click event to radio buttons, access the clicked radio button’s value using this keyword:

    $(':radio').click(function(r){
  console.log(this.value);
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio3">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio3">1 star</label>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can get all the radio elements with same name and then add an event listener to get the checked item

    [...document.getElementsByName('inlineRadioOptions')].forEach(item => {

  item.addEventListener('change', (e) => {
    if (e.target.checked) {
      console.log(e.target.value)
    }

  })
})
    <div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio3">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio3">1 star</label>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You can use this jQuery to get value

        <div class="d-flex justify-content-center">
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="5">
    <label class="form-check-label" for="inlineRadio1">5 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="4">
    <label class="form-check-label" for="inlineRadio2">4 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
    <label class="form-check-label" for="inlineRadio3">3 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="2">
    <label class="form-check-label" for="inlineRadio4">2 stars</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="1">
    <label class="form-check-label" for="inlineRadio5">1 star</label>
  </div>
</div>
    <script>
      $(document).ready(function() {
        $('input[name="inlineRadioOptions"]').on('click', function() {
          var selectedValue = $(this).val();
          console.log(selectedValue); // Display the selected value in the browser console
        });
      });
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search