Icheck Checkbox

Icheck checkbox to view results. Clicking on 'VIew All' will overwrite other checkboxes.

by clarusdignus

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/flat/_all.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<div class="category-list">
    	<h4>CATEGORY</h4>

    <ul class="ul_category">
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man1">
            <label for="man1">Bags</label>
        </li>
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man2">
            <label for="man2">Jeans</label>
        </li>
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man3">
            <label for="man3">Shoes</label>
        </li>
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man4">
            <label for="man4">Shorts</label>
        </li>
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man5">
            <label for="man5">T-Shirts</label>
        </li>
        <li>
            <input type="checkbox" class="men_checkbox" name="men[7]" id="man6">
            <label for="man6">Trousers</label>
        </li>
        <li>
            <input type="checkbox" name="menAll" id="man7">
            <label for="man7">View All</label>
        </li>
    </ul>
</div>

CSS

.ul_category {
    list-style:none;
    margin-left:-30px;
}
.category-list {
    margin-left:30px;
}
.inputClass {
    display: block;
    width:100px;
}

JavaScript

$(document).ready(function () {
    $('input').iCheck({
        checkboxClass: 'icheckbox_flat-pink',
        radioClass: 'iradio_flat-pink'
    });

});

$('#man7').on('ifChecked', function (event) {
    $('#man1,#man2,#man3,#man4,#man5,#man6').iCheck('uncheck');
});
$('#man1,#man2,#man3,#man4,#man5,#man6').on('ifChecked', function (event) {
    $('#man7').iCheck('uncheck');
});