Check/UncheckAll Chechbox

Question

Good Day

 

I have checkboxes that when I click they get checked and then the value be populated into the database (SQL Server), then when I uncheck that textbox the value get removed from the database.

Now what I need is a check/uncheck All checkbox that will do the same. When checking all the values should show into the database, and when unchecking all values should be removed. My code below;

 

HTML

<b>
<label>
Check/Uncheck All
</label>
<label class="switch">
<input type="checkbox" id="checkall">
<span class="slider round">
</span>
</label>
</b>
<br />
<br />
<div id="checkboxes" style="height: 500px;position:relative;border:1px solid darkgray" class='checkbox' >
<div id="div2" style="max-height:100%;overflow:auto;" class='checkbox' >
<div id="suburbsDiv" class='checkbox' ></div>
</div>
</div>

JAVASCRIPT FOR CHECK/UNCHECK ALL CHECKBOX

<script type="text/javascript">
function toggleChecked(status) {
$("#checkboxes input").each(function () {
$(this).prop("checked", status);
});
}
$(document).ready(function () {
// Changing state of CheckAll checkbox
$("#checkboxes").click(function () {
if ($("#checkboxes").length == $("#checkboxes input:checked").length)
{
$("#checkall").prop("checked", true);
}
else
{
$("#checkall").removeAttr("checked");
}
});
$("#checkall").click(function () {
var status = $("#checkall").prop('checked');
toggleChecked(status);
});
});
</script>