Select/Deselect All Checkboxes along with colour changing of a selected row using jquery

StackOverflow https://stackoverflow.com/questions/8428020

Pregunta

I have a table where each row has some data and the user can submit all rows or single row or some rows. So, every row has a checkbox now and If the user checks the checkbox the background colour of this row should be changed(I have implemented this using jquery). Now there is another checkbox to select All these checkboxes, I have implemented this too with jquery. Now the issue is that when I selectAll checkboxes the row background-colour doesnot change , but when I check individual rows it gets changed. Being a novice coder I can understand that click event is not happening so the background colour is not changing. So I have used change event instead of click , but it's still the same. The functions for select All and row background colour change are working good but individually. Need help regarding this...

Thanks in advance, NoviceCoder.

¿Fue útil?

Solución

Without any of your code I tried something. See if you can apply to your code. (working example)

HTML

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="selectAll" id="selectAll" /></th>
            <th>Row name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 1</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 2</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="select" /></td>
            <td>test row 4</td>
        </tr>
    </tbody>
</table>

CSS

.selected { background-color: #ffff00; }

Javascript

jQuery(function($) {
    $('tbody :checkbox').change(function() {
        $(this).closest('tr').toggleClass('selected', this.checked);
    });
    $('thead :checkbox').change(function() {
        $('tbody :checkbox').prop('checked', this.checked).trigger('change');
    });
});

Otros consejos

this is a simple example for your request just copy/paste all this code, in new page and run it. Enjoy 

<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.4.2/jquery.min.js" type="text/javascript"
charset="utf-8"></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);
}
});

</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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top