CODEWITHSUNDEEP
jquery
SoftwareNerd
SoftwareNerd

Reputation: 1895

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

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..i.e Chkcolumn should be automatically checked when Chk1 Chk2 Chk3 Chk4 are chekced..

Upvotes: 0

Views: 172

Answers (3)

Chamila Chulatunga
Chamila Chulatunga

Reputation: 4914

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);

​

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359776

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

Upvotes: 2

zeMinimalist
zeMinimalist

Reputation: 453

$(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);
        }
    });
});

Upvotes: 0

Related Questions