javascript toggle all and disable button at same time

javascript toggle all and disable button at same time

I have HTML form with checkboxes "delete" array and one checkbox
"togglechbx" to toggle all checkboxes to check/uncheck. So when none of
delete[] is checked, "delete-selected-btn" has to be disabled and checkbox
"togglechbx" has to be uncheck automatically.
The javascript below does the trick, but i have it combined from different
stackoverflow examples. That's why it looks so ugly and messy. Could you
guys take a look, if there is some way to make it shorter and cleaner?
Thank you in advance.
<form id="show-images">
<input id="togglechbx" type="checkbox" onClick="toggle(this);" />
<input type="checkbox" class="delete-img" name="delete[]" value="1"/>
<input type="checkbox" class="delete-img" name="delete[]" value="2"/>
<input type="checkbox" class="delete-img" name="delete[]" value="3"/>
<button id="delete-selected-btn" type="submit" disabled="disabled">Delete
selected</button></form>
<script>
$('.delete-img').change(function(){
var arrlenght = $("#show-images input:checkbox:checked").length;
if ( arrlenght > 0){
if ( arrlenght == 1 &&
document.getElementById("togglechbx").checked) {
$("#togglechbx").prop("checked", false);
$('#delete-selected-btn').attr("disabled", "disabled");
return false;
}
// any one from delete is checked
$('#delete-selected-btn').removeAttr("disabled");
}else{
// none is checked
$('#delete-selected-btn').attr("disabled", "disabled");
}});
function toggle(source) {
checkboxes = document.getElementsByName('delete[]');
for(var i=0, n=checkboxes.length; i<n; i++) {
checkboxes[i].checked = source.checked;
if ($("#show-images input:checkbox:checked").length > 0){
$('#delete-selected-btn').removeAttr("disabled");
}else{
// none is checked
$('#delete-selected-btn').attr("disabled",
"disabled");
}
}
}
</script>