Updated February 21, 2023
Introduction to jQuery Radio Value
jQuery radio value is got by using the checked selector and Val method. To obtain the value of matching radio components, use the Val method. It produces an undefined value if none of the choices are chosen. The checked CSS pseudo-class selector represents any radio that is checked and can be used to access the selected radio button. With jQuery and ordinary JavaScript, we can do many different things.
- To determine which radio button is picked in a form, we must first obtain the desired input group, which includes the kind of input as an option, and then use the val method to access the value of this selection. The name of the presently selected option is returned here.
- All input groups with the option type of input in the provided form are selected using the selector input.
How to get jQuery radio value?
- By modifying the checked property of the input type, there are two ways to change the presently selected radio button dynamically.
- Checkboxes, radio buttons, and select element options function with the checked selector. In addition, the selected selector can be used to obtain only selected options of select elements.
- On a click or change event in jQuery, we sometimes need to access the selected value of a radio button.
- It’s a minor detail, but we access the value of a selected radio button in jQuery using the class or id. We virtually always need to use a male/female radio button in our form.
- When working with radio buttons, we rarely need to retrieve the selected radio button value with a click or modify javascript events.
- On the other hand, will not think of this as a stressful duty. Getting the selected value of a radio button.
- All checked checkboxes, radio buttons, and element choices are selected using the checked selector.
- The Val method retrieves the value of input items like a radio button, a select element, or a textarea element. No parameters are required for the Val method.
- The below example shows the alert value by using the selected radio button.
Code –
<!DOCTYPE html>
<html>
<head>
<form>
<div>
<input type = "radio" name = "Number" value = "One" id = "Yellow">
<label> One </label>
</div>
<div>
<input type = "radio" name = "Number" value = "Two" id = "Pink">
<label> Two </label>
</div>
<div>
<input type = "radio" name = "Number" value = "Three" id ="White">
<label> Three </label>
</div>
<div>
<input type = "radio" name = "Number" value = "Four" id = "Blue">
<label> Four </label>
</div>
<div>
<input type = "radio" name = "Number" value = "Five" id = "Black">
<label> Five </label>
</div>
</form>
<script>
$('input[name="Number"]').on("click", function() {
var Number = $('input[name = "Number"]:checked').val();
alert(Number);
});
</script>
</head>
<body>
</body>
</html>
- In the above example, we used five radio buttons to alert it by clicking on every radio button. In addition, we have used the checked selector method to select values from a specified radio button.
- We have written checked selector method code under the script section. We have used input type as radio button while defining radio button.
- The below example shows that alert the value of the selected radio button when the specified button is clicked.
Code –
<!DOCTYPE html>
<html>
<head>
<p> Select the gender </p>
<input type = "radio" name="gender" value = "male">
<label>Male</label>
<input type = "radio" name = "gender" value = "female">
<label> Female </label>
<input type = "button" value = "Get Value">
<script>
$(document).ready(function() {
$("input[type = 'button']").click(function() {
var gender = $("input[name = 'gender']:checked").val();
alert(gender);
});
});
</script>
</head>
<body>
</body>
</html>
- In the above example, we have used two radio buttons to alert the value of a specified radio button. In addition, we have used the Val method to select values from a specified radio button.
- We have written the Val method code under the script section. Also, we have used input type as radio button while defining radio button.
- The below example shows changing the background color from the selected color using the radio button value.
Code –
<!DOCTYPE html>
<html>
<head>
<form>
<div class="form-group">
<label> <strong> Select the color which was you need to apply </strong>:-</label> <br>
<label> <input type = "radio" name="color" value = "White"> White </label>
<label> <input type = "radio" name="color" value = "Red"> Red </label>
<label> <input type = "radio" name="color" value = "Pink"> Pink </label>
<label> <input type = "radio" name="color" value = "Black"> Black </label>
<label> <input type = "radio" name="color" value = "Grey"> Grey </label>
<label> <input type = "radio" name="color" value = "Yellow"> Yellow </label>
<label> <input type = "radio" name="color" value = "Blue"> Blue </label>
</div>
<div class="form-group text-center">
<button class="btn" type="button">Click here to apply color</button>
</div>
</form>
<div id='div' style='padding:35px 15px;'> change the background color from the selected color by using radio button value. </div>
<script type="text/javascript">
$('.btn').click(function() {
var value = $('input[name="color"]:checked').val();
$('#div').css('background', value)
});
</script>
</head>
<body>
</body>
</html>
- In the above example, we have used six radio buttons to change the color. In addition, we have used the Val method to select radio buttons from a specified radio button.
- The below example shows the selected values from the list of values.
Code –
<!DOCTYPE html>
<html>
<head>
<title> Get the value </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js">
</script>
</head>
<body>
<input type = "radio" name = "Name" class = "Names" value = "ABC"> ABC
<input type = "radio" name = "Name" class = "Names" value = "PQR"> PQR
<input type = "radio" name = "Name" class = "Names" value = "XYZ"> XYZ
<input type = "radio" name = "Name" class = "Names" value = "CBN"> CBN
<input type = "radio" name = "Name" class = "Names" value = "BCD"> BCD
<button> Get Name </button>
<script type = "text/javascript">
$("button").click(function()
{
var val = $(".Names:checked").val();
alert(val);
});
</script>
</body>
</html>
Conclusion
Checkboxes, radio buttons, and select element options function with the checked selector. The selected selector can obtain only selected options of select elements. JQuery radio value is obtained by using the checked selector and Val method. To obtain the value of matching radio components, use the Val method.
Recommended Articles
This is a guide to jQuery Radio Value. Here we discuss How to get jQuery radio value along with the codes and outputs. You may also look at the following articles to learn more –
