Selecionar todos checkbox ao clicar em um, e selecionar check ao clicar em linha
Boas galera!!
script bem batido e massacrado já, mas com uns adicionais, que nunca vi por ai. Fazer a primeira parte é super simples, e tô cansado de ver gente postando como selecionar grupo de checkbox, ao marcar um. Então, para não fugir do costume, posto algo melhor:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* ao clicar no todos, seleciona todos e altera a class de todas as linhas */
$("input[name='todos']").click(function(){
var ckd = $( this ).attr('checked');
$("#grid input[type='checkbox']").attr({checked: ckd});
toogle_class( ckd, $('#grid tbody tr') );
});
/* ao clicar no checkbox, altera a class da linha */
$("input[name='status[]']").click(function(){
toogle_class( $( this ).attr('checked'), $( this ).parents('tr') );
});
$("#grid tr").click(function( e ){
if( e.target.tagName!='INPUT' )
{
var checkbox = $( this ).find("input[type='checkbox']");
var ckd = !checkbox.attr('checked');
checkbox.attr('checked', ckd);
toogle_class( ckd, $( this ) );
}
});
});
function toogle_class( ckd, el ){
if( ckd==true )
el.addClass('selecionado');
else
el.removeClass('selecionado');
}
</script>
<style type="text/css">
.selecionado { background: #f0f; }
</style>
</head>
<body>
<form action="" method="post">
<table id="grid">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td><input type="checkbox" name="todos" value="todos" /></td>
</tr>
<tr>
<td>15</td>
<td>Resident Evil</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="15" /></td>
</tr>
<tr>
<td>17</td>
<td>Tomb Raider</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="17" /></td>
</tr>
<tr>
<td>21</td>
<td>Prince of Persia</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="21" /></td>
</tr>
<tr>
<td>18</td>
<td>Soul Reaver</td>
<td><input type="checkbox" name="status[]" value="1" />
<input type="hidden" name="id" value="18" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>