Check how many checkboxes checked

by Hugo Carneiro

HTML

<div class="panel panel-default">
    <div class="panel-heading active" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true"><h4 class="panel-title">Christmas in the Office</h4></div>
    <div id="collapse1" class="panel-collapse collapse in" style="" aria-expanded="true">
        <div class="panel-body">
            <div class="form-wrapper ready" data-form-id="5654365446fe4">
                <form data-next-transition="" data-next-section="" data-next-page="" class="form-horizontal fields-required" novalidate="novalidate">
                    <div class="required-note hidden">All fields are required unless marked as (Optional)</div>
                    <fieldset>
                        <div class="form-group" data-validation-rule="checkboxrule">
                            <label class="col-sm-6 control-label" for="checkboxes">To-do:</label>
                            <div class="col-sm-6">
                                <div class="checkbox">
                                    <input type="checkbox" name="checkbox0" id="checkboxes-We2" data-label="to-do:" value="Decide who is going to come into the office over Christmas. Or plan how employees can work from home." class="validation " required="" aria-required="true">
                                    <label for="checkboxes-We2"><span></span>Decide who is going to come into the office over Christmas. Or plan how employees can work from home.</label>
                                </div>
                                <div class="checkbox">
                                    <input type="checkbox" name="checkbox0" id="checkboxes-9Ar" data-label="to-do:" value="Set-up office Christmas tree and decorations, wrap empty boxes to suggest everyone has gifts underneath (but they are actually empty)." class="validation " required="" aria-required="true">
                                    <label for="checkboxes-9Ar"><span></span>Set-up office Christmas tree and decorations,...

JavaScript

var numberChecked = "";

$('.panel').each(function() {
    var numberCheckboxes = $(this).find('.form-horizontal input[type="checkbox"]').length;
    var numberChecked = $(this).find('.form-horizontal input:checked').length;

    $(this).find('.panel-heading h4').append("<small> - " + numberChecked + "/" + numberCheckboxes + "</small>");
});

function checkCheckboxes() {
    $('.panel').each(function() {
        var numberCheckboxes = $(this).find('.form-horizontal input[type="checkbox"]').length;
        var numberChecked = $(this).find('.form-horizontal input:checked').length;
		
        $(this).find('.panel-heading h4 small').html(" - " + numberChecked + "/" + numberCheckboxes);
    });
}

$('input[type="checkbox"]').on('change', function() {
	checkCheckboxes();
});