jQuery | How to get values of multiple selected checkboxes

To get an array of selected checkboxes values we need to use jQuery each() method and :checked selector on a group of checkboxes.

The each() method will loop over the checkboxes group in which we can filter out selected checkboxes using <strong>:checked</strong> selector.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Get Values of Selected Checkboxes</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script>
        $(function () {

            $("#get-selected").click(function () {
                var open = [];
                $.each($("input:checkbox[name='day']:checked"), function () {
                    open.push($(this).val());
                });
                alert("We remain open on: " + open.join(", "));
            })

        });
    </script>
</head>

<body>

    <h1>When you are open?</h1>

    <label>
        <input type="checkbox" value="monday" name="day"> Monday
    </label>
    <label>
        <input type="checkbox" value="tuesday" name="day"> Tuesday
    </label>
    <label>
        <input type="checkbox" value="wednesday" name="day"> Wednesday
    </label>
    <label>
        <input type="checkbox" value="thursday" name="day"> Thursday
    </label>
    <label>
        <input type="checkbox" value="friday" name="day"> Friday
    </label>
    <label>
        <input type="checkbox" value="saturday" name="day"> Saturday
    </label>
    <label>
        <input type="checkbox" value="sunday" name="day"> Sunday
    </label>

    <p>
        <button id="get-selected">Get Selected Days</button>
    </p>
</body>

</html>

 

Leave a Comment

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