JSFiddle - React, Tailwind, and code Playground

by ivanionut

HTML

<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<div>Using Check all function</div>
<div id="selectCheckBox">
    <input type="checkbox" class="all" />Select All
    <input type="checkbox" class="check" />Check Box 1
    <input type="checkbox" class="check" />Check Box 2
    <input type="checkbox" class="check" />Check Box 3
    <input type="checkbox" class="check" />Check Box 4</div>

CSS

#field {
    width:300px;
    height:300px;
    border:1px solid;
}
.cursor {
    cursor:url('http://placehold.it/16x16'), auto;
}

JavaScript

$(function () {
    $('input[type="checkbox"]').change(function (e) {
       if(this.className == 'all')
       {
           $('.check').prop('checked', this.checked);
       }
        else
        {
            $('.all').prop('checked', $('.check:checked').length == $('.check').length);
        }
    });
});