How can I retrieve the value of a selected radio button within a fieldset using jQuery?

Question

How can I retrieve the value of a selected radio button within a fieldset using jQuery?

I have a fieldset with two radio buttons inside. When a radio button is clicked, I want to retrieve the value of the clicked button. However, my current jQuery code is not functioning correctly and I would appreciate any assistance.

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.

javascript jquery html css

Answer 1

Answer №1

Make sure to use the radio selector when working with radio buttons

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

Example of the code in action:-

$('#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:- To allow only one radio button selection at a time, assign a 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

Make sure to use the radio selector when working with radio buttons

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

Example of the code in action:-

$('#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:- To allow only one radio button selection at a time, assign a 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 3

Answer №2

Consider using the jQuery selector

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

to target specific radio buttons.

Make sure to assign a common name attribute to your radio buttons to ensure only one can be selected at a time:

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

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

});

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

Consider using the jQuery selector

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

to target specific radio buttons.

Make sure to assign a common name attribute to your radio buttons to ensure only one can be selected at a time:

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

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

});

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

Answer №3

To ensure users can only select one radio button at a time, make sure to assign names to each radio button. If you want to allow users to select multiple radio buttons simultaneously, you can use the code snippet below:

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

If you need users to choose only one option, add names to each radio button like in the example 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>

To retrieve the value of the selected radio button, use the following script:

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

This should provide the functionality you need!

Answer 6

To ensure users can only select one radio button at a time, make sure to assign names to each radio button. If you want to allow users to select multiple radio buttons simultaneously, you can use the code snippet below:

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

If you need users to choose only one option, add names to each radio button like in the example 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>

To retrieve the value of the selected radio button, use the following script:

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

This should provide the functionality you need!

Answer 7

Answer №4

If you're looking to expand your knowledge on attributes in jQuery, I recommend checking out this resource: https://api.jquery.com/attribute-equals-selector/

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

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

});

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

If you're looking to expand your knowledge on attributes in jQuery, I recommend checking out this resource: https://api.jquery.com/attribute-equals-selector/

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

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

});

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

Answer №5

For radio buttons in the same group, it is important to assign a name attribute. This allows you to select the value when clicked and display it in an alert.

$('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>

Answer 10

For radio buttons in the same group, it is important to assign a name attribute. This allows you to select the value when clicked and display it in an alert.

$('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>

How can I retrieve the value of a selected radio button within a fieldset using jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I am looking for a way to batch upload several images from an HTML page to a nodejs server, where I can then rename and

Alter the page's color scheme completely

React application not displaying element properly?

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

Tips for adjusting image and div sizes dynamically according to the window size

How come the last word in CSS nested flexbox wraps even though there is space available?

Is your jquery draggable bouncing around unexpectedly on the page when released?

What steps should I take to ensure that this 3D transformation functions properly in Internet Explorer 10?

Handsontable: How to update renderers when a row is deleted

Creating a responsive navigation menu by converting overflowing menu items into a dropdown list

MailJet experienced a template language issue while trying to send a message with Template [ID]

Jekyll adjusting the starting line of code snippet formatting

Encountered Runtime Issue of TypeError: undefined cannot be iterated (unable to access property Symbol(Symbol.iterator))

What is the best way to delay JavaScript execution until after React has finished rendering?

Keeping datetimepicker current when a date is chosen - a guide

How to center elements using Bootstrap 4 and flexbox styling

An issue with the form.submit function within an if-else statement

The JavaScript file failed to load

Tips on how to maintain the value of an integer variable even after clicking a submit button, enabling its reuse on the same page

Initiate a JavaScript confirmation dialog using server-side logic in ASP.NET