Checking checkbox status using jquery

I have some checkbox, one for each day of the week. I have to check unsig Jquery which one is selected and write on a label all the selected items value. I tried different way but none of them work. Here is the code for the checkbox

<div class="row">
    <div class="col-md-12">
        <div id="format">
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkLunedi" class="lunedi1 giornoSettimana" value="lunedi">
                <label for="checkLunedi" class="cella">LUNEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="ceckMartedi" class="giornoSettimana" value="martedi">
                <label for="ceckMartedi" class="cella">MARTEDI</label>
            </div>
            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkMercoledi" class="giornoSettimana" value="mercoledi">
                <label for="checkMercoledi" class="cella">MERCOLEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkGiovedi" class="giornoSettimana" value="giovedi">
                <label for="checkGiovedi" class="cella">GIOVEDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkVenerdi" class="giornoSettimana" value="venerdi">
                <label for="checkVenerdi" class="cella">VENERDI</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkSabato" class="giornoSettimana" value="sabato">
                <label for="checkSabato" class="cella">SABATO</label>
            </div>

            <div class="col-md-1 col-centered celleSettimana">
                <input type="checkbox" id="checkDomenica" class="giornoSettimana" value="domenica">
                <label for="checkDomenica" class="cella">DOMENICA</label>
            </div>
        </div>
    </div>
</div>

Can someone help me?

Answers 1

  • Try this. Complete code If you want list to be displayed once you click on any button.

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function(){
                var favorite = [];
                $.each($("input[name='day']:checked"), function(){            
                    favorite.push($(this).val());
                });
                favorite = favorite.join(", ");
                $('#result').html("Selected value are:"+favorite);
                //alert("My favourite days are: " + favorite.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <div class="row">
        <div class="col-md-12">
            <div id="format">
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="lunedi1 giornoSettimana" value="lunedi">
                    <label for="checkLunedi" class="cella">LUNEDI</label>
                </div>
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="martedi">
                    <label for="ceckMartedi" class="cella">MARTEDI</label>
                </div>
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="mercoledi">
                    <label for="checkMercoledi" class="cella">MERCOLEDI</label>
                </div>
    
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="giovedi">
                    <label for="checkGiovedi" class="cella">GIOVEDI</label>
                </div>
    
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="venerdi">
                    <label for="checkVenerdi" class="cella">VENERDI</label>
                </div>
    
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="sabato">
                    <label for="checkSabato" class="cella">SABATO</label>
                </div>
    
                <div class="col-md-1 col-centered celleSettimana">
                    <input type="checkbox" name="day" class="giornoSettimana" value="domenica">
                    <label for="checkDomenica" class="cella">DOMENICA</label>
                </div>
    
                 <button type="button">Get Values</button>
    
                 <p id="result"></p>
            </div>
        </div>
    </div>   
    

Related Articles