0

I have the following radio buttons :

<label>Referred to Health Facility</label>
    <input required name="Health_Ref" type="radio" class="wellness_center radiostyle Health_Ref" id="Health_Ref" value="Yes">
    <div class="radiolabel">Yes</div>
    <input name="Health_Ref" type="radio" required class="wellness_center radiostyle Health_Ref" id="Health_Ref" value="No" checked="checked">
    <div class="radiolabel">No</div>

And below is my jquery function to get the values :

$(document).ready(function () {
        $(".Health_Ref").click(function () {
            var value = $(".Health_Ref").val();
            alert(value);
        });
    });

The value being returned when i click the first or second button is for the first button which is Yes , how is the best way to implement the jquery function so that I can get the value of the clicked radio button ?

H Dindi
  • 1,484
  • 6
  • 39
  • 68
  • You must try with :checked property. Try the solution given here http://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery – sms Sep 29 '15 at 12:44
  • Yes, this is a duplicate question: Best answer is here: http://stackoverflow.com/questions/596351/how-can-i-know-which-radio-button-is-selected-via-jquery – Jess Sep 29 '15 at 12:51

2 Answers2

1

You may want to try adding :checked to your jquery selector. Documentation for :checked.

Option 1 with :checked

$(document).ready(function () {
    $(".Health_Ref").click(function () {
        var value = $(".Health_Ref:checked").val();
        alert(value);
    });
});

Option 2 with $(this)

I made the code simpler. this is the value of the element in an event handler, so you can simply use $(this) to turn the element into a jQuery object.

$(document).ready(function () {
    $(".Health_Ref").click(function () {
        var value = $(this).val();
        alert(value);
    });
});

Code Pen: http://codepen.io/anon/pen/wKgBGN

Jess
  • 23,901
  • 21
  • 124
  • 145
0

var value = $(".Health_Ref:checked").val();

This selects only the currently checked radio button.

the same works for checkboxes.