Checking checkbox status using jquery

Question

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?

I tried different way but none of them work. incude what you have tried people may help you make it work since you said none of them work — guradio
– guradio, Commented Mar 31, 2016 at 2:14

Sahil · Accepted Answer · 2016-03-31 02:11:45Z

You can add an event listener to the checkboxes and then check using .is(':checked') if state of checkbox has changed or not.

var label = $('#daysSelected');
//listening to click events
$('input:checkbox').on('click', function(){
  var labels = [];
  //looping over all the checkboxes
  $('input:checkbox').each(function(){
    var checkbox = $(this);
    if( checkbox.is(':checked')){
      //storing the selected labels of respective checkboxes
      labels.push(checkbox.next('label').html());
    }
  });
  label.html(labels.join(', '));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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>
  <p id="daysSelected"></p>
    </div>

AMACB · Accepted Answer · 2016-03-31 02:05:42Z

0

Try this sample code to test if a checkbox is checked:

$(document).ready(function() {
  $('#test').click(function() {
    alert($('#check').prop('checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check">
<input type="button" id="test" value="Is that checked?">

Note: this code uses jQuery, so make sure to include it in your HTML file.

answered Mar 31, 2016 at 2:05

AMACB

1,2982 gold badges18 silver badges26 bronze badges

1 Comment

Daniele Martini Over a year ago

thanks for your quik answer. What I'm tring to do is to is to check constantly if my checboxs are selected and if it so..take the values of the checboxs selected and then write them on a label. It's hard for me check if they are selected and save the value on the label

JF-Mechs · Accepted Answer · 2016-03-31 02:49:51Z

0

I might be late but try to check this out Fiddle.

var $inputCheckBoxes = $('input[type="checkbox"]');
$inputCheckBoxes.on("change", function(){
    $("#checked-inputs-container > span").remove();
    $.each($inputCheckBoxes, function(index, element) {
        var isChecked = $(element).prop("checked");
        if (isChecked) {
            $("#checked-inputs-container").append('<span>' + $(element).val() + '</span>');
        }
    });
});

edited Mar 31, 2016 at 2:49

answered Mar 31, 2016 at 2:40

JF-Mechs

1,07110 silver badges25 bronze badges

Comments

Prajwal · Accepted Answer · 2016-03-31 06:39:39Z

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>

Collectives™ on Stack Overflow

Checking checkbox status using jquery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related