Tableau de checkbox sous jquery
Le code ci-dessous est un tableau de deux lignes
Sur chaque ligne une checkbox
Au clic sur la ligne ou sur la checkbox, elle se colore en bleu
En début de tableau, une traditionnelle checkbox "cocher tout"
Cela fonctionne bien mais je voudrais qu'en decochant le "cocher tout", il y ait également remise à blanc du background des lignes bleues présentes.
Merci pour votre aide
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
| <style type="text/css">
.rowclick {
border-collapse: collapse;
margin-bottom: 1em;
width: 100%;
}
.rowclick td {
border: 1px solid #999999;
padding: 4px;
}
td.cb {
width: 15px;
}
.selected td {
background-color: #48507B;
color: #FFFFFF;
}
.noselected td {
background-color: #ffffff;
color: #000000;
}
</style>
<link type="text/css" href="../styles/jquery-ui-1.8.13.custom_perso.css" rel="stylesheet" />
</head>
<body>
<script>
$(document).ready(function() {
$('#rowclick5 tr')
.filter(':has(:checkbox:checked)')
.addClass('selected')
.end()
.click(function(event) {
$(this).toggleClass('selected');
if (event.target.type !== 'checkbox') {
$(':checkbox', this).attr('checked', function() {
return !this.checked;
});
}
});
$('#cocheTout').click(function() { // clic sur la case cocher/decocher
var cases = $("#rowclick5").find(':checkbox'); // on cherche les checkbox qui dépendent de la liste 'cases'
if(this.checked){ // si 'cocheTout' est coché
cases.attr('checked', true); // on coche les cases
}else{ // si on décoche 'cocheTout'
cases.attr('checked', false);// on coche les cases
}
});
});
</script>
<span id='cocheText'>Cocher tout</span>
<table >
<tbody >
<tr class="">
<td class="cb"><input type='checkbox' id='cocheTout'/></td>
<td></td>
</tr>
<tr class="">
<td class="cb"></td>
<td></td>
</tr>
</tbody>
<tbody id="rowclick5" class="rowclick">
<tr class="">
<td class="cb"><input type="checkbox" value=""></td>
<td>row 1</td>
</tr>
<tr class="">
<td class="cb"><input type="checkbox" value=""></td>
<td>row 2</td>
</tr>
</tbody>
</table> |
