How To Get Checked Checkbox 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 checked checkbox value in jQuery, to get the values of every checkbox selected in a group, combine the each() function and the jQuery:checked selector.
Here, the checked checkboxes are iterated over using the each() method.
The two ways to determine whether a checkbox in jQuery is checked or not are prop() and is().
- prop(): This method offers a straightforward way to find out a checkbox's current status.Because each checkbox contains a checked attribute that indicates whether it is checked or not, it functions flawlessly under any circumstance.
- is(): The method additionally happens to be straightforward and user-friendly. This makes it simple to determine whether a box is checked or not.
A checkbox is just a selection box that enables users to pick true or false in a binary manner through checking and unchecking the box.
A checkbox can be thought of as a simple icon that is widely in use in GUI forms or applications to request one or more user inputs.
Step By Step Guide On How To Get Checked Checkbox Value In jQuery :-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
function show(){
alert($("input:checkbox:checked").val());
}
</script>
</head>
<body>
<div>
<form name = "sampleForm">
<input type = "checkbox" id = "result1" title="TalkersCode jQuery Example" value = "red" >red</input><br/><br/>
<input type = "checkbox" id = "result2" title="TalkersCode jQuery Example" value = "green" >green</input> <br/><br/>
<input type = "button" id = "submitButton" onclick="show();" value = "submit"/>
</form>
</div>
</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.
- Then again we open the <script> tag and then add. 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 close.
- 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 form, under the form we create a checkbox with assigning color to the text.
- Then we create a button to submit.
- Then we close the form.
- After that we close program using </center></body></html>
Conclusion :-
When a checkbox is checked or marked, it signifies that now the user has chosen the value, which is true.
A checkbox that is not checked or marked indicates false, which denotes that now the user has still not chosen the value.
The checkbox, which allows several selections at once, is distinct from the radio button on the dropdown list.
Your radio button and dropdown, however, only let us select one from the available alternatives.
I hope this article on how to get checked checkbox value in jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
