Select / Unselect All
HTML
<form name="forms" id="frm">
<div class="category">
<textarea cols="50" rows="5" class="customer_type" id="customer_type">
</textarea>
<input type="text" class="customer_type" id="customer_type" size="50" maxsize="200" readonly>
<ul class="list">
<li>
<label for="select_unselect">
<input name="0" id="select_unselect" class="select_unselect" type="checkbox" value="0">Select / Unselect
</label>
</li>
<li>
<label for="men">
<input name="1" id="men" type="checkbox" value="Men">Men
</label>
</li>
<li>
<label for="women">
<input name="2" id="women" type="checkbox" value="Women">Women
</label>
</li>
<li>
<label for="boys">
<input name="3" id="boys" type="checkbox" value="Boys">Boys
</label>
</li>
<li>
<label for="girls">
<input name="4" id="girls" type="checkbox" value="Girls">Girls
</label>
</li>
<li>
<label for="babies">
<input name="5" id="babies" type="checkbox" value="Babies">Babies
</label>
</li>
<li>
<label for="women_veiled">
<input name="6" id="women_veiled" type="checkbox" value="Women Veiled">Women Veiled
</label>
</li>
</ul>
</div>
<div class="items"></div>
</form>
CSS
.search {
text-transform: capitalize; // first letter in uppercase
}
.list {
cursor: pointer;
list-style-type: none;
}
a {
text-decoration: none;
}
JavaScript
$(function() {
function listchecks() {
sel = "";
$('#frm :checkbox:gt(0)').each(function() {
sel += ($(this).is(':checked')) ? $(this).val() + ';' : '';
});
$("#customer_type").val(sel);
}
$('#frm :checkbox:gt(0)').on('click', listchecks);
$('#frm :checkbox:eq(0)').on('click', function() {
selstatus = $(this).is(':checked');
console.log(status);
$('#frm :checkbox:gt(0)').each(function() {
$(this).prop('checked', selstatus);
listchecks();
})
})
});