Question

I have to develope one form which contains table with section and sub-section.On click event of section,sub section should be select/deselcet.And also on uncheck of each sub-section my section should be uncheck .I have to do this thing on row click as well as checkbox click.http://imgboot.com/images/sureshdasari/selectdeselectcheckboxes.gif this is what i want but inside this image only checkbox click working i want the same action on row click also.Is there any one have idea then please help me .If it is easier using jquery then also help for me.

thanks in Advance.

Here is my code link http://pastebin.com/J5bnXbN2 i want same things on row click

Answer 1

See this : http://jsfiddle.net/RtcBR/3/

$(document).ready(function() {
var flag = false;
var flag2 = false;
$("#checkall").click(function(event) {
    $('input:checkbox:not(#checkall)').attr('checked', this.checked);
    if ($(this).attr("checked")) {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
    }
    else {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
    }
    flag2 = true;
});

$('input:checkbox:not(#checkall)').click(function(event) {
    if ($("#checkall").attr('checked') && !this.checked) {
        $("#checkall").attr('checked', false);
        $(this).closest('tr').css("background-color", "#ffffff");
    }
    if (!$("#checkall").attr('checked') && this.checked) {
        if ($('input:checkbox:not(#checkall)').filter(":not(:checked)").length === 0) {
            $("#checkall").attr('checked', true);
        }
    }
    if (this.checked) {
        $(this).closest('tr').css("background-color", "#FC9A01");
        flag = true;
    }
    if (!this.checked) {
        $(this).closest('tr').css("background-color", "#ffffff");
        flag = true;
    }
});

$('tr').click(function() {

    if (!flag) {
        var checkbox = $(this).find('td:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            checkbox.closest('tr').css("background-color", "#FFF");
        } else {
            checkbox.attr('checked', true);
            checkbox.closest('tr').css("background-color", "#FC9A01");
        }
    }
    flag = false;
});
$('tr#chkrow').click(function() {
    if (!flag2) {
        var checkbox = $(this).find('th:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            $('tr').find('td:first').find('input').attr('checked', false);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
        } else {
            checkbox.attr('checked', true);
            $('tr').find('td:first').find('input').attr('checked', true);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
        }
    }
    flag2 = false;
});
});​