How to Get All the Selected Checkbox Values Onclick Using jQuery

Checkboxes are quite useful in web forms. Even more, jQuery provides a handy functionality to manage checkboxes.

Here, we are going to learn how to get the values of selected checkboxes with a similar group.

Get Checkbox Values Onclick Event Using jQuery

We can use :checked selector in jQuery to select only selected values.


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Get All the Selected Checkbox Value in jQuery</title>
<script src=""></script>
        <h3>Select your favorite programming languages:</h3>
        <label><input type="checkbox" value="Java" name="language"> Java</label>
        <label><input type="checkbox" value="PHP" name="language"> PHP</label>
        <label><input type="checkbox" value="JavaScript" name="language"> JavaScript</label>
        <label><input type="checkbox" value="jQuery" name="language"> jQuery</label>
        <label><input type="checkbox" value="React" name="language"> React</label>
        <button type="button">Get Selected Values</button>
      $(document).ready(function() {
              var arr = [];
              $.each($("input[name='language']:checked"), function(){
              alert("Your favourite programming languages are: " + arr.join(", "));


In the above code, we created a group of checkboxes and a button to trigger the function. Using jQuery we first set an onclick event on the button after the document is loaded.

In the onclick event, we created a function in which we first declared an array named arr. After that, we used a query selector to select all the selected checkboxes. Finally, we print all the vales in an alert box.


I hope now you can easily get all the values of checked checkboxes using jQuery query selector. Please comment your thoughts below if the above article helps you.

Enjoy Scripting 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *