Checkbox Status

by Sunny Mody

HTML

<div class="status">
    <input type="checkbox" name="chk[]" value="Demo Box" />
    <div class="status-value"></div>
</div>

CSS

.status {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    width: 130px;
    padding: 15px;
    margin-top: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
input {
    float: left;
    margin-right: 10px;
}

JavaScript

var checkedStatus = function () {
    var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0;
    if (atLeastOneIsChecked) $('.status-value').text("Checked");
    else $('.status-value').text("UnChecked");
};

checkedStatus();

$("input[type=checkbox]").on("click", checkedStatus);