How to get the value of the currently selected radio button inside a div using jquery?

Question

I have this mark up:

 <div id="filter-1" class="form-radios"> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-all" name="field_filter_1_value" value="All" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-1" name="field_filter_1_value" value="1" checked="checked" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-2" name="field_filter_1_value" value="2" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-3" name="field_filter_1_value" value="3" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-4" name="field_filter_1_value" value="4" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" name="field_filter_1_value" value="5" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-1-value"> <input type="radio" id="filter-1-value-6" name="field_filter_1_value" value="6" class="form-radio"> </div> </div> <div id="filter-2" class="form-radios"> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-all" name="field_filter_1_value" value="All" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-1" name="field_filter_1_value" value="1" checked="checked" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-2" name="field_filter_1_value" value="2" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-3" name="field_filter_1_value" value="3" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-4" name="field_filter_1_value" value="4" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" name="field_filter_1_value" value="5" class="form-radio"> </div> <div class="form-item form-radio form-item-field-filter-2-value"> <input type="radio" id="filter-2-value-6" name="field_filter_1_value" value="6" class="form-radio"> </div> </div> 

And I am trying to get the selected value from the radio button group that is wrapped inside a main div.

My idea is to get the check all the main div that contains the radio buttons and then get the value of the selected radio button but my codes doesn't seem to work.

Here is my JQuery:

  $(".form-radios").each(function(){ var radio_val = $(this).closest('input[type="radio"]:checked').val(); console.log(radio_val); }); 

Answer 1

You should not use closest() method as it will travel up on DOM, not down. You need to use find() method for example:

$(this).find('input[type="radio"]:checked').val();

Answer 2

You can get it like this

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

Here is a demo it will alert the value of the selected radio button

You can even make it more accurate by adding the class on the input in the identifier

$("input.form-radio:radio[name='field_filter_1_value']:checked").val();