get selected radio value

Question

This is the HTML block with radiobuttons:

<div id="lokationcontent" class="form-group">
   <div class="radio">
      <label><input type="radio" name="radioButtonGroup" id="ls0" value="Lokation_Stapelgatan Karlstad">Stapelgatan Karlstad</label>
   </div>
   <div class="radio"><label><input type="radio" name="radioButtonGroup" id="ls1" value="Lokation_Torggatan Karlstad">Torggatan Karlstad</label></div>
   <div class="radio"><label><input type="radio" name="radioButtonGroup" id="ls2" value="Lokation_Värmlandsgatan Karlstad">Värmlandsgatan Karlstad</label></div>
</div>

I try to access the selected value with the following jquery code:

$('input[name="radioButtonGroup"]:checked').value

But the value is undefined when i console.log it, what am i doing wrong?

Answer 1

Jquery objects does not contain a property called value. Try,

$('input[name="radioButtonGroup"]:checked').val();

If you want to use .value over this then you have to access the core JS object,

$('input[name="radioButtonGroup"]:checked')[0].value

Answer 2

Use .val() , the value property does not exist for jQuery objects.

$('input[name="radioButtonGroup"]:checked').val()

Demo

Answer 3

You are trying to use javascript property value to jquery object. You should either convert it to javascript object and use .value.like this:

$('input[name=radioButtonGroup]:checked')[0].value;

Or you need to use jquery method .val():

$('input[name=radioButtonGroup]:checked').val()

Answer 4

value is the native JS way of retrieving a value. In jQuery, you need to use val():

$('input[name="radioButtonGroup"]:checked').val()

If you prefer to use the value property, use:

$('input[name="radioButtonGroup"]:checked')[0].value