4

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.

3
  • Have you tried $('#skin-complexion input')?
    – deEr.
    Commented May 16, 2018 at 9:29
  • Conan Carroll did you checked my answer? 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

4

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>

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

1

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-complexion 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-complexion" name="properties[skin_complexion]">

  <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-complexion input[type='radio']").click(function(){
    console.log($(this).val());
});

Hope this helps!

0

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

$('#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" value="Fair" />
  Fair

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


</fieldset>

0

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.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" name="myRadios" />
  Fair

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


</fieldset>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.