Check/UnCheck All Select Box

by Anand Jee

HTML

<h1>Check/UnCheck All Select Box</h1>

<hr>
<ul>
    <li><input type="checkbox" id = "chk_selectall"><label for="chk_selectall" id="lbl_selectall">CHECK ALL</label></li>
    <li><input type="checkbox" id = "chk_sun" class="chkall"><label for="chk_sun">SUNDAY</label></li>
    <li><input type="checkbox" id = "chk_mon" class="chkall"><label for="chk_mon">MONDAY</label></li>
    <li><input type="checkbox" id = "chk_tue" class="chkall"><label for="chk_tue">TUESDAY</label></li>
    <li><input type="checkbox" id = "chk_wed" class="chkall"><label for="chk_wed">WEDNESDAY</label></li>
    <li><input type="checkbox" id = "chk_thu" class="chkall"><label for="chk_thu">THURSDAY</label></li>
    <li><input type="checkbox" id = "chk_fri" class="chkall"><label for="chk_fri">FRIDAY</label></li>
    <li><input type="checkbox" id = "chk_sat" class="chkall"><label for="chk_sat">SATURDAY</label></li>
</ul>

CSS

body{font-family: calibri;font-size: 12px;}
h1{text-align:center;font-size:15px;}
ul{margin:0;padding:0;padding-left:10px;}
ul li{list-style:none;padding:2px 0;}
label:hover{color:#ff0000;}

JavaScript

//Check/Uncheck SelectBox functionality
    //uncheck Selectall checkbox if any checkbox  clicked
    $(".chkall").click(function () {
        if (!$(this).is(":checked")) {
            $("#chk_selectall").prop("checked", false);
            $("#lbl_selectall").text("CHECK ALL");
        } else {
            var flag = 0;
            $(".chkall").each(function () {
                if (!this.checked)
                    flag = 1;
            })
            if (flag == 0) {
                $("#chk_selectall").prop("checked", true);
                $("#lbl_selectall").text("UNCHECK ALL");
            }
        }
    });
    //chk_selectall Checkbox click select all 
    $('#chk_selectall').click(function (event) {  //on click
        if (this.checked) { // check select status
            $('.chkall').each(function () { //loop through each checkbox
                $("#lbl_selectall").text("UNCHECK ALL");
                this.checked = true;  //select all checkboxes 
            });
        } else {
            $('.chkall').each(function () { //loop through each checkbox
                $("#lbl_selectall").text("CHECK ALL");
                this.checked = false; //deselect all checkboxes 
            });
        }
    });