How To Get Radio Button Value In jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of how to get radio button value in jQuery, to determine what radio button was selected on a form, we first obtain the required input group that includes the type of input as just an option, and then we can use the val() method to acquire its value of this selection.
This gives back the name of the presently chosen option.
The value of input items like radio buttons, select elements, and textarea elements can be obtained using the.val() method. There are no arguments needed to use the.val() function.
Then, obtain the appropriate input group with the type of input available in order to check whether the radio button is selected.
There is only one choice selected at a time inside the checked radio button. In jQuery, a checked/unchecked radio button is made using the.prop() method.
The values of the value property are not shown in the radio button user interface.
This value property only makes sense after a form is submitted. The name of the radio button is delivered together with the value of the value attribute if a radio button is checked when the form is submitted (if the radio button is not checked, no information is sent).
Step By Step Guide On How To Get Radio Button Value In jQuery :-
<html>
<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>
- Writing <HTML>, which informs the browser of the version of the HTML we're using, is the first step. An HTML document's initial element is a tag.
- The project header should be described using the <head> tag. The final brackets are closed, while the title bracket is open, not so with the final brackets.
- Next, the <script> tag was included. This script tag also contains a description of a code / file we utilized, as well as a javascript run of the google API.
- Afterwards the script gets shut down.
- The <script> tag was then once more opened before being appended. A description of the code or file we utilized, along with the javascript Google API run, are both included in the script tag.
- After that, we head and close the script.
- After this comes a <body> tag,which describes the content of the webpage.
- Then a radio button is made to obtain a value.
- After that, we used the </body></html> tag to end the programme.
Conclusion :-
A value of a selected radio button can then be obtained using the val() method.
Little circles known as radio buttons enable users to choose just one pertinent option from a variety of options.
On registration forms, test portals, quiz portals, and other places, radio buttons are frequently utilized.
I hope this article on how to get radio button value in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
