How to get selected radio button value in a fieldset via jQuery?

Question

I have 2 radio buttons wrapped in a fieldset. I want to get the value of the clicked radio button inside the fieldset when it is clicked.

HTML:

<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" />


</fieldset>

jQuery:

$('#skin-complexion').on('change', function() {

  var value = $(this).val();
  alert(value);      

});

My jQuery code above is not working. Any help is appreciated.

Answer 1

You have to use radio as selector too because you are changing radio buttons

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  alert(value);      
});

Working snippet:-

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  console.log(value);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" />


</fieldset>

Note:- If you want that at a time only one radio button can be checked, then add common name attribute to them

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  console.log(value);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" name="radio_example" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" name="radio_example" value="Medium" />


</fieldset>

Answer 2

Try $('#skin-complexion > input[type=radio]').

You should also have to set a common name attribute to your radio buttons so that only one radio button can be selected at a time:

$('#skin-complexion > input[type=radio]').on('change', function() {

  var value = $(this).val();
  alert(value);      

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" name="level" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" name="level" value="Medium" />


</fieldset>