jQuery Radio Button Checked Value
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of jQuery radio button checked value, finding the value of a chosen radio button on the inside of a group is as easy as using the jQuery:checked selector in conjunction with the val() method.
To determine what radio button has been selected on a form, we first obtain the required input group in the kind of input as an option, and then we can use the val() method to acquire its value of this selection.
The selected option's name is returned in this case. All input groups with the provided form's option type of input are selected using the selector "input[name=option]:checked".
Then, obtain the appropriate input group with the type of input available in order to check whether the radio button is selected.
A value of a selected radio button can then be obtained using the val() method.
Step By Step Guide On jQuery Radio Button Checked Value :-
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Radio Button Value</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
</script>
</head>
<body>
<h4>Please select your gender.</h4>
<p>
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
</p>
<p><input type="button" value="Get Value"></p>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed and also head closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a label for creating buttons for assigning value to gender.
- Then we create a button to get value.
- After that we close program using </body></html>
Conclusion :-
In jQuery, we must first locate the desired input group in order to determine what radio button is selected.
By applying the name attribute to the input element as shown below, we can accomplish this.
The aforementioned will select every input group in the form that has gender as the name property.
The selected radio button's value can then be obtained as follows by using the val() method.
I hope this article on jQuery radio button checked value helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
