Set badge value to appropriate checked number

by Martin Murciego

HTML

<div class="box sortable">
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
    <label class="label_select">
        <input type="checkbox" class="rule" />Rule list <span class="badges"></span>
    </label>
</div>

CSS

.box {
	    padding:10px;
	    border:1px solid #ccc;
	    width:250px;
	}
	.box .label_select {
	    display:block;
	    height:25px;
	    line-height:25px;
	    cursor:pointer;
	    margin-bottom:2px;
	    font-size:13px;
	}
	.box .label_select:after {
	    clear:both;
	    content:" ";
	    display:block;
	}
	.badges {
	    float:right;
	    display:inline-block;
	    background-color:#ccc;
	    border-radius:50%;
	    padding: 0px 5px;
	    min-width:10px;
	    text-align:center;
	    position:relative;
	    top:-2px;
	}

JavaScript

$(function () {
    $('.badges').hide();
    var count = 0;
    $('.rule').on('change', function () {
        var $currentBadge = $(this).next('.badges');
        if (this.checked) {
            count++;
            $currentBadge.show().text(count);
        } else if (!this.checked) {
            count--;
            var thisVal = parseInt($currentBadge.text(),10);
            $currentBadge.hide().text("");
            $(".badges:visible").each(function () {
                var val = parseInt($(this).text(),10);
                if (val != 1 && val > thisVal) $(this).text(val- 1);
            });
            var reduce = parseInt($(this).parent().closest('.box').find('[type=checkbox]:checked').next('.badges').text());

        }
    })
})