Get The Value Of Checked Radio Button Without Re-selecting The Buttons

So I am getting some buttons as follows: var reportFilterButtons = $('input[name=reportfilter]', '#reportChartForm'); Later on this easily allows me to attach a change handler as

Solution 1:

You could use $.filter to find the checked one:

reportFilterButtons.filter(':checked').val()

Solution 2:

A jQuery event listener handler this property points to the element that was the target of the event. This means that you don't have to find it again. Just wrap in a jQuery object $(this), and you're good to go (fiddle demo).

Code:

<div id="reportChartForm">
    <input type="radio" name="reportfilter" value="1">
    <label>Radio 1</label>
    <input type="radio" name="reportfilter" value="2">
    <label>Radio  2</label>
    <input type="radio" name="reportfilter" value="3">
    <label>Radio  3</label>
</div>

var reportFilterButtons = $('input[name=reportfilter]', '#reportChartForm');

reportFilterButtons.change(reportFilterButtonsChange);

function reportFilterButtonsChange() {
    var value = $(this).val(); // this is the reference to the element
    console.log(value);
}