Article Categories

Selected Reading

Use jQuery to get values of selected checkboxes?

Javascript Web Development Front End Technology jQuery

jQuery provides an efficient way to get values of selected checkboxes using the :checked selector combined with checkbox input elements. This is useful for forms where users can select multiple options.

Syntax

$('input[type="checkbox"]:checked')
// or
$('input[name="checkboxName"]:checked')

Basic Example

Here's a complete example that demonstrates getting values of selected checkboxes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Checkbox Values</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h3>Select your hobbies:</h3>
    
    <input type="checkbox" name="hobby" id="cricket" value="Cricket" />
    <label for="cricket">Cricket</label><br>
    
    <input type="checkbox" name="hobby" id="music" value="Listening Music" />
    <label for="music">Listening Music</label><br>
    
    <input type="checkbox" name="hobby" id="reading" value="Reading Newspaper" />
    <label for="reading">Reading Newspaper</label><br>
    
    <input type="checkbox" name="hobby" id="gaming" value="Gaming" />
    <label for="gaming">Gaming</label><br><br>
    
    <button type="button" id="getValues">Get Selected Values</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $("#getValues").click(function() {
                var selectedValues = [];
                
                $('input[name="hobby"]:checked').each(function() {
                    selectedValues.push(this.value);
                });
                
                if (selectedValues.length > 0) {
                    $("#result").html("<h4>Selected values:</h4><ul><li>" + 
                        selectedValues.join("</li><li>") + "</li></ul>");
                } else {
                    $("#result").html("<p>No checkboxes selected!</p>");
                }
            });
        });
    </script>
</body>
</html>

Different Methods to Get Checkbox Values

Method 1: Using each() Function

// Get values using each() and push to array
var values = [];
$('input[name="hobby"]:checked').each(function() {
    values.push($(this).val());
});
console.log(values);

Method 2: Using map() Function

// Get values using map() - more concise
var values = $('input[name="hobby"]:checked').map(function() {
    return this.value;
}).get();
console.log(values);

Method 3: Using Specific Checkbox IDs

// Check specific checkboxes by ID
if ($("#cricket").is(':checked')) {
    console.log("Cricket is selected: " + $("#cricket").val());
}

if ($("#music").is(':checked')) {
    console.log("Music is selected: " + $("#music").val());
}

Comparison of Methods

Method	Use Case	Returns
`each()`	When you need to process each value individually	Manual array building
`map()`	Quick array creation from selected values	Array directly
`is(':checked')`	Checking specific checkbox status	Boolean true/false

Common Use Cases

Getting checkbox values is commonly used for:

Form validation before submission
Dynamic content filtering
User preference collection
Multi-select operations

Conclusion

jQuery's :checked selector combined with each() or map() provides efficient ways to retrieve selected checkbox values. The map() method is more concise for getting an array of values, while each() offers more control for individual processing.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

517 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next