Refer the Below Sample code for your reference using jQuery. Here just Selecting/UnSelecting all the checkboxes based on SelectAll/UnSellect All checkbox. Also for single checkbox checking length for all checkboxes are checked or not based on that check/Uncheck to main Checkbox.
You can do other stuff on selecting single checkbox change where you can set value to other control or storing in some value in other element as per your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".chkAll").on("click", function () {
var isChecked = $(this).is(":checked");
$(".kcheckbox").each(function () {
if (isChecked) {
$(this).attr("checked", "checked");
} else {
$(this).removeAttr("checked");
}
});
});
$(".kcheckbox").on("click", function () {
var isChecked = $(this).is(":checked");
if (isChecked) {
var totalchecboxexLength = $(".kcheckbox").length;
var count = 0;
$(".kcheckbox").each(function () {
var ischecboxChecked = $(this).is(":checked");
if (ischecboxChecked) {
count++;
}
});
if (totalchecboxexLength == count) {
$(".chkAll").attr("checked", "checked");
}
} else {
$(".chkAll").removeAttr("checked");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
Select/UnSelect All <input class="chkAll" type="checkbox" />
<br />
<br />
<div>
<fieldset>
<legend>
<input class="kcheckbox" type="checkbox" value="0" /></legend>
<label style="display: inline-block;">
<span>Förnamn: sa</span><br />
<span>Efternamn: sxad</span><br />
<span>E-post: sadq</span><br />
<span>Behörighet till mapp: General</span><br />
<span>Kommentar: s</span><br />
</label>
</fieldset>
<br />
<fieldset>
<legend>
<input class="kcheckbox" type="checkbox" value="1" /></legend>
<label style="display: inline-block;">
<span>Förnamn: sd</span><br />
<span>E-post: sd</span><br />
<span>Behörighet till mapp: Finance</span><br />
</label>
</fieldset>
<br />
</div>
</form>
</body>
</html>
Screenshot
