All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Get Checked Checkbox Value In jQuery

Last Updated : Jul 18, 2023

How To Get Checked Checkbox Value In jQuery

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>
  1. 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.
  2. 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.
  3. 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.
  4. The script is then closed.
  5. 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.
  6. The script is then closed and also head close.
  7. The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
  8. Then we create a form, under the form we create a checkbox with assigning color to the text.
  9. Then we create a button to submit.
  10. Then we close the form.
  11. 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.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪