In this article we will show you the solution of radio button checked jQuery, here we needs to use click() and val() methods for displays clicked radio button value as result. The click() method triggers the click event, or attaches a function to run when a click event occurs.
The val() method returns or sets the value attribute of the selected elements and which is returns the value of the value attribute of first matched element.
Step By Step Guide On Radio Button Checked jQuery :-
Here we defined html block with h3 tag for displays heading and two input elements ‘Yes, No’ with id’s ‘cal1, cal2’.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we appended click method on both radio buttons by id’s ‘cal1, cal2’ for displays clicked radio button value as result by val() method.
<!DOCTYPE html>
<html>
<head>
<title>Checked Radio Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#cal1').click(function(){
alert($('#cal1').val()+" is Clicked");
});
$('#cal2').click(function(){
alert($('#cal2').val()+" is Clicked");
});
});
</script>
</head>
<body>
<h3>Select Anyone Option</h3>
<input type="radio" id="cal1" value="Yes">Yes
<input type="radio" id="cal2" value="No">No
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we appending click method with checkbox ‘cal1,cal2’ which helps us for load some process when click event triggered.
- When user clicks on anyone defined radio button then respective click event will loads respective alert method.
- There we collecting clicked radio button value by val() then displayed on alertbox with string ‘is Clicked’.
- In html block we defined h3 tag for showing heading and two input element with radio button type ‘Yes, No’ and id’s cal1, cal2.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know radio button checked state using jquery click method.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘Yes, No’ of radio buttons with heading ‘Select Anyone Option’ now user needs to click on anyone button then clicked button value displayed on alert box like ‘Yes is Clicked’.
I hope this article on radio button checked jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
