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-plexion" name="properties[skin_plexion]">

  <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-plexion').on('change', function() {

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

});

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

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-plexion" name="properties[skin_plexion]">

  <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-plexion').on('change', function() {

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

});

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

• javascript
• jquery
• html
• css

• Have you tried $('#skin-plexion input')? – deEr. Commented May 16, 2018 at 9:29
• Conan Carroll did you checked my answer? – Death-is-the-real-truth Commented May 16, 2018 at 13:13
• @AlivetoDie yes. your answer is checked now. thank you! – Adrian Commented May 16, 2018 at 17:58

5 Answers 5

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

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

Working snippet:-

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

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

  <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 mon name attribute to them

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

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

  <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>

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

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

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

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

});

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

  <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>

You need to put the names to the radio button otherwise use can select both the radio buttons at the same time. If users can select both radio button at the same time then you can try the below code

$("#skin-plexion input[type='radio']").click(function(){
    console.log($(this).val());
});

And if user can select one radio button at the same time then you need to add names to the radio button like below:

<fieldset id="skin-plexion" name="properties[skin_plexion]">

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

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


</fieldset>

And use the following script to get the checked radio button value:

$("#skin-plexion input[type='radio']").click(function(){
    console.log($(this).val());
});

Hope this helps!

I recand you learn about attribute in Jquery:https://api.jquery./attribute-equals-selector/

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

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

});

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

  <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>

You should give name attribute to your radio button if they are of same group. Then you can select the value on click and alert it.

$('input[type=radio][name=myRadios]').on('change', function() {

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

});

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

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

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


</fieldset>