Get the selected value of a list of radio buttons

Question

I have a list of radio buttons each with the same name attribute. The following JavaScript is meant to detect a change in any of the buttons and pass the selected value to the getColumnNames() method.

$("input[name=SelectedSheet]:radio").change(function () {
    getColumnNames(this.val());
})

It detects when any of the buttons change, but it doesn't pass the string value of the selected radio button.

In Firebug, when one of the radio buttons is clicked, the this keyword contains the following:

input#SelectedSheet_Second Sheet attribute value = "Second Sheet"

Btw, SelectedSheet is the name attribute of the list of radio buttons.

How do I pass the value of the selected attribute to the getColumnNames() method?

Answer 1

.val() is a jQuery method, so you must wrap this with $() to use it:

getColumnNames($(this).val());

Or you can just use plain JS:

getColumnNames(this.value);

Answer 2

You can remove the :radio, since it will find it by the name. Then use $(this).val() instead

<input type="radio" name="SelectedSheet" value="sheet1" />
<input type="radio" name="SelectedSheet" value="sheet2" />
<input type="radio" name="SelectedSheet" value="sheet3" />

$(document).ready(function () {
   $('input[name="SelectedSheet"]').change(function () {
      alert($(this).val());
   });
});

http://jsfiddle.net/fxsupvhj/

Answer 3

Try to use $(this).val(); inside your code.

$("input[name=SelectedSheet]:radio").change(function () {
    getColumnNames($(this).val());
})