How to get Indeterminate Checkbox to fire function of other checkboxes?

I made a table that has checkboxes that show and hide rows to make it easier to compare specific rows. I wanted to add indeterminate checkboxes so that multiple rows can be selected or not selected at the same time. It kinda works in that it checks the boxes under it but doesn't fire the function to hide or show the row even though its checked. The individual check boxes still fire the function though.

jsfiddle

Show/hide rows with checkbox

$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");

if( ischecked ){
    $('.' + valu).show();
}else{
    $('.' + valu).hide();
}
});

Indeterminate Checkbox for division 1

$(document).ready(function () {
var checkboxes = document.querySelectorAll('input.div1'),
checkdiv1 = document.getElementById('checkdiv1');

for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.div1:checked').length;

    checkdiv1.checked = checkedCount > 0;
    checkdiv1.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}

checkdiv1.onclick = function() {
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
}
}
});

Indeterminate Checkbox for division 2

$(document).ready(function () {
var checkboxes = document.querySelectorAll('input.div2'),
checkdiv2 = document.getElementById('checkdiv2');

for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.div2:checked').length;

    checkdiv2.checked = checkedCount > 0;
    checkdiv2.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}

checkdiv2.onclick = function() {
for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
}
}
});