Select/Deselect checkbox on row click in javascript

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

Can you show the HTML and jquery that you have written and tried? — Ravi Y
– Ravi Y, Commented Dec 10, 2012 at 6:32
Warning Help Vampire has been detected evasive procedures must be followed . — ShrekOverflow
– ShrekOverflow, Commented Dec 10, 2012 at 6:40
+1 I think that what he tried for is obviously demonstrated in the attached image. — SaidbakR
– SaidbakR, Commented Dec 10, 2012 at 6:44

Sh1d0w · Accepted Answer · 2012-12-10 16:23:13Z

Try this example

http://jsfiddle.net/QUwuR/

<table>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>

$('tr').click(function() {
    var checkbox = $(this).find('td:first').find('input');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    }
});

EDIT: here is the full working example with the code you provided

<html>
    <head>
    <title>How to highlight the selected row in table/gridview using jquery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function()
        {
            $("#checkall").live('click',function(event){
            $('input:checkbox:not(#checkall)').attr('checked',this.checked);
            //To Highlight
            if ($(this).attr("checked") == true)
            {
            //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
            $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
            }
            else
            {
            //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
            $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
        }
    });
        $('input:checkbox:not(#checkall)').live('click',function(event)
        {
            if($("#checkall").attr('checked') == true && this.checked == false)
            {
                $("#checkall").attr('checked',false);
                $(this).closest('tr').css("background-color","#ffffff");
            }
            if(this.checked == true)
            {
                $(this).closest('tr').css("background-color","#FC9A01");
                CheckSelectAll();
            }
        if(this.checked == false)
        {
            $(this).closest('tr').css("background-color","#ffffff");
        }
});

function CheckSelectAll()
{
    var flag = true;
    $('input:checkbox:not(#checkall)').each(function() {
        if(this.checked == false)
        flag = false;
    });
    $("#checkall").attr('checked',flag);
}

I'm sorry for this mistake. Since you click on the input, who is in the entire tr two events are triggered. So you need to assing click events on all cells, except those who checkboxes are in. Here is the fix:

$('tr').find('td:gt(0)').click(function() {
    var checkbox = $(this).parent().find('td:first').find('input');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    }
});

$('tr#chkrow').find('th:gt(0)').click(function() {
    var checkbox = $('input#checkall');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    $('tr').find('td:first').find('input').attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    $('tr').find('td:first').find('input').attr('checked', true);
    }
});
});

</script>
</head>
<body>
    <table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
    <thead>
    <tr id="chkrow">
        <th>
            <input type="checkbox" id="checkall" />
        </th>
    <th>
    Sr.
    </th>
    <th style="text-align: left;">
        First Name
    </th>
    <th style="text-align: left;">
        Last Name
    </th>
    <th>
        Country
    </th>
    <th>
    Marital Status
    </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>

dear sir it is not working on click event of checkbox and i also want on same demo which is working on my image .Thanks in advance
Well this is just an example to show you the logic.If you want me to write all code for you, then provide your table HTML and javascript you already written.
dear your code is not working on checkbox click. now its working on row click but what about checkbox click? please help Thanks in advance
I'm sorry for this mistake. Since you click on the input, who is in the entire tr two events are triggered. So you need to assing click events on all cells, except those who checkboxes are in. I updated my comment with the fix.

Anujith · Accepted Answer · 2012-12-10 10:57:11Z

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

Collectives™ on Stack Overflow

Select/Deselect checkbox on row click in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related