Tableau de checkbox sous jquery

**pierre50** · 05/11/2011, 20h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Willpower** · 05/11/2011, 20h19

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
    $('#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
            $('#rowclick5 tr').addClass('selected');
         }else{ // si on décoche 'cocheTout'
            cases.attr('checked', false);// on coche les cases
            $('#rowclick5 tr').removeClass('selected');
        }          
    });

**pierre50** · 06/11/2011, 14h43

Merci beaucoup !

Tableau de checkbox sous jquery

JavaScript

Discussions similaires

Partager

Partager