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 *

istanbul escortHacklinkartvin escortGiresun escortEscortporno izleizmir escortsincan escortistanbul escortizmir escortGaziantep escortşişli escortkartal escortbodrum escortAntalya escortMarmaris escortpornoankara escortistanbul escortizmir escortizmir escorthttps://escortcity.net/Ankara çilingironwin girişHacklink satın alçankaya escortAyvalık Escortkütahya escortgümüşhane escortAksaray escortaydın escortkayseri escortçankaya escortkızılay escortkeçiören escorthepabeteryaman escortKiralık Bahis Siteleribonus veren sitelerKiralık Bahis Siteleri
Diş eti ağrısıankara kocaeli nakliyatgüvenlik bariyerisakarya evden eve nakliyatgaziantep evden eve nakliyatnargilehttps://www.orneknakliyat.comseowordpress en iyi seo eklentileripuro satın alBeard Transplantizmir saç ekimiistanbul evden eve nakliyatimplantbebekeskişehir inşaat şirketleriantika eşya alanlarantika eşya alanlarGülüş Tasarımıantalya haberCar Accident Lawyerpgcdpmsagaziantep boşanma avukatıAntika alan yerlermaltepe antika eşya alanlar