How to Check the checkbox when all the checkboxes in a row are checked?

Question

Hi all How can i check the checkbox when all the other checkboxes in a row are checked what i mean is i have a div table which looks like this

<div id="Row-8">
    <span class="span2">
        <label class="checkbox">
            <input type="checkbox" class="regular-checkbox" onchange="checkallrowcheckboxes(this)" value="8" name="selectedObjects" id="8"><label for="rowcommoncheckbox-8"></label></label></span>
    <span class="span2">AddOrEdit</span>
    <span class="span2">
        <label class="checkbox">
            <input type="checkbox" value="8" class="regular-checkbox" name="chkAdd" id="Add-8"><label for="Add-8"></label></label></span>
    <span class="span2">
        <label class="checkbox">
            <input type="checkbox" value="8" class="regular-checkbox" name="chkEdit" id="Edit-8"><label for="Edit-8"></label></label></span>
    <span class="span2">
        <label class="checkbox">
            <input type="checkbox" value="8" class="regular-checkbox" name="chkDel" id="Delete-8"><label for="Delete-8"></label></label></span>
    <span class="span2">
        <label class="checkbox">
            <input type="checkbox" value="8" class="regular-checkbox" name="chkview" id="View-8"><label for="View-8"></label></label></span>
</div>

Which looks like this

ChkColumn  PageName Chk1 Chk2 Chk3 Chk4

what i want is when all the checkboxes in right side os row are checked the left side checkbox should be automatically checked..ie Chkcolumn should be automatically checked when Chk1 Chk2 Chk3 Chk4 are chekced..

Answer 1

Shameless self-promotion: this seems to be a perfect use-case for a jQuery plugin I've written .

Try this:

$('#Row-8 input[type="checkbox"]:first')
    .checkAll('#Row-8 input[type="checkbox"]:not(:first)');​

Demo: http://jsfiddle.net/mattball/9ErH6

Answer 2

$(function() {
    $('#Row-8 input').change(function() {
        var add8 = $('#Add-8').is(':checked');
        var edit8 = $('#Edit-8').is(':checked');
        var delete8 = $('#Delete-8').is(':checked');
        var view8 = $('#View-8').is(':checked');
        if (add8 && edit8 && delete8 && view8) {
            $('#Row-8 input').attr('checked',false);
            $('#8').attr('checked',true);
        }
    });
});

Answer 3

Demo here: http://jsfiddle.net/Mx4q2/

I added some 'driving'/'driven' classes to the checkboxes and then used this script:

function driveCheckbox(event){
    var $currentRow = $(this).parents('.row');

    var $checkedDrivers = $currentRow.find('.driving-checkbox:checked');
    if($checkedDrivers.length == 4){
        $currentRow.find('.driven-checkbox').prop('checked', true);
    } else {
        $currentRow.find('.driven-checkbox').prop('checked', false);
    }
}

function selectAll(event){

    var $currentRow = $(this).parents('.row');

    var $targets = $currentRow.find('.driving-checkbox');
    if($(this).is(':checked')){
        $targets.prop('checked', true);
    } else {
        $targets.prop('checked', false);
    }
}
$('.driving-checkbox').change(driveCheckbox);
$('.driven-checkbox').change(selectAll);

​