Thursday 10 November 2016

Check-Uncheck all Checkbox Using jquery

<style>
body{width:610px;}
#frmCheclAll {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
#divCheckAll{background-color:#F2F2F2;border:#DADADA 1px solid;margin-bottom:15px;width:6em;padding:4px 10px;}
#divCheckboxList{border-top:#DADADA 1px solid;}
.divCheckboxItem{padding:6px 10px;}

</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function check_uncheck_checkbox(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
</script>
<div id="frmCheclAll">
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>
</div>

No comments:

Post a Comment