如何通过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> 

Answer 3

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!

Answer 4

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> 

Answer 5

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>