How to check which radio button is checked with jquery?

Question

I'm trying to print text depending on which radio button is checked. Can you tell me what's wrong?

Just getting the "error" output.

<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="0" required> m
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="1"> w

<span class="gendertest">*Output*</span>

$(document).ready(function() {
  $(".gendercheck").change(function() {
    if (gender.value == 0) {
      $(".gendertest").text("m");
    } else if (gender.value == 1) {
      $(".gendertest").text("w");
    } else {
      $(".gendertest").text("error");
    }
  });
});

what is `gender`? you don't appear to declare it or assign it anywhere. — Jonathan, Feb 13 '19 at 21:48
What is `gender` - you never defined it. If you replace `gender` with `this` - it should work — tymeJV, Feb 13 '19 at 21:48
Possible duplicate of [Find out if radio button is checked with JQuery?](https://stackoverflow.com/questions/2272507/find-out-if-radio-button-is-checked-with-jquery) — Heretic Monkey, Feb 13 '19 at 21:54

MikeTT · Accepted Answer · 2019-02-13T22:18:32.677

1

You just need to define gender in your code (since your trying to access the value property of gender via gender.value).

Try something like this (I tested and it works, by the way):

$(document).ready(function() {
  $('.gendercheck').change(function() {
    var selectedRadio = $('.gendercheck:checked'); // this is the "checked" radio button that has the class you're using. using .value would be more of the vanilla JS way, which isn't bad, but if you wanted to do it the jQuery way, just get the val like this --> selectedRadio.val(); 
    if (selectedRadio.val() == 0) {
      $('.gendertest').text('m');
    } else if (selectedRadio.val() == 1) {
      $('.gendertest').text('w');
    } else {
      $('.gendertest').text('error');
    }
  });
});

For fun, just wanted to show you an example with fewer lines of code. Basically, print the radio input's value instead of defining the if/else statements. You'd need to modify your html inputs:

<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="m" required> men
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="w"> women

$(document).ready(function() {
  $('.gendercheck').change(function() {
    var selectedRadio = $('.gendercheck:checked'); // the checked radio
    $('.gendertest').text( selectedRadio.val() ); // output with the radio input's val
  });
});

edited Feb 13 '19 at 22:18

answered Feb 13 '19 at 22:10

MikeTT

28
5

`this` in the change handler for radio buttons will be the one that was selected. no reason to look it up. – Taplar Feb 13 '19 at 22:25
@Taplar - true, but given the question related to jQuery, I was just showing the "jQuery way". – MikeTT Feb 13 '19 at 22:36
Doing it the "jQuery way" doesn't mean introducing unnecessary lookups – Taplar Feb 13 '19 at 22:37
Calling it "unnecessary" seems more pedantic than anything. Lots of folks start out learning JS via jQuery. Since the OP is specifically looking at how to do it via jQuery, showing it this way offers more detail on jQuery's methods. – MikeTT Feb 13 '19 at 23:03
It's teaching people an inefficent way to use the library, which just encourages people to use it incorrectly and promote the idea amongst some people that the library isn't efficient. And yes, given that you already have a reference to the element with `this` or the `e.target` off the event that you can pass in, it is highly unnecessary. – Taplar Feb 13 '19 at 23:05
It's not "inefficient" nor "highly unnecessary". That's hyperbole. It's a jQuery question, which to me suggest the OP may be just starting out. The difference in DOM time/computation for my code vs `$(this).val()` is going to be imperceptible on the frontend, and my answer gives the OP more awareness of jQuery's utilities. – MikeTT Feb 14 '19 at 01:59

score 0 · Answer 2 · answered Feb 14 '19 at 05:37

$(".gendercheck").on("change", function() {
  var selected_ID = ($(this).attr('id'));
  if (selected_ID == "genderm") {
    $(".gendertest").text("m");
  } else if (selected_ID == "genderw") {
    $(".gendertest").text("w");
  } else {
    $(".gendertest").text("error");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="feedback-form-visit-again" id="genderm" class="gendercheck" value="0" required> m
<input type="radio" name="feedback-form-visit-again" id="genderw" class="gendercheck" value="1"> w
<br>
<span class="gendertest">*Output*</span>

How to check which radio button is checked with jquery?

2 Answers2