jQuery Radio Button Checked Event
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
In this article we will show you the solution of jQuery radio button checked event, 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.
There is only one choice selected at a time inside the checked radio button. To construct a checked/unchecked radio button with jQuery, we use the.prop() method.
The val() method can access that value of this selection to determine whether the radio button was selected inside a form once we obtain the appropriate input group that provides the type of input as an option.
This gives back a name of the presently chosen option.
All input groups with the provided option type of input are selected using the selector "input[name=option]:checked".
To use the jQuery: checked selector and the val() method to find the value of a selected radio button inside of a group is simple.
Step By Step Guide On jQuery Radio Button Checked Event :-
<html>
<head>
<title>”jquery radio button checked event</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>jquery radio button checked event</h1>
<label>
<input type="radio" name="gender" value="1"> Male
</label>
<label>
<input type="radio" name="gender" value="2"> Female
</label>
<script>
$(document).ready(function(){
$('input[type=radio][name=gender]').change(function() {
if (this.value == 1) {
alert("Select Male");
}else if (this.value == 2) {
alert("Select Female");
}
});
});
</script>
</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 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 assigning gender.
- Then we again opened the <script> tag and 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.
- After that we close program using</body></html>
Conclusion :-
I hope this article on jQuery radio button checked event helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
