button toggle AllChecked/AllUnchecked checkbox

Bonjour,

J'ai un bouton:

Code:

1
2
3
 
 
<input type='button' value='CheckAll' onClick='checkAll(this);'>

et des checkbox sous la forme d'un toggle:

Code:

1
2
3
4
5
6
7
 
<input  class='checkbox'  type='checkbox' name='list' checked value='yes' align=center id='halo1'>
<input  class='checkbox'  type='checkbox' name='list' checked value='yes' align=center id='halo2'>
|
|
|
|

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
 
<script src="jquery.min.js"></script>
  <script>
  $(document).ready(function() {
    /*
      Progressive enhancement.  If javascript is enabled we change the body class.  Which in turn hides the checkboxes with css.
    */
    $('body').attr("class","js");
 
    /*
      Add toggle switch after each checkbox.  If checked, then toggle the switch.
    */
     $('.checkbox').after(function(){
       if ($(this).is(":checked")) {
         return "<a href='#' class='toggle checked' ref='"+$(this).attr("id")+"'></a>";
       }else{
         return "<a href='#' class='toggle' ref='"+$(this).attr("id")+"'></a>";
       }
 
 
     });
 
 
     /*
      When the toggle switch is clicked, check off / de-select the associated checkbox
     */
    $('.toggle').click(function(e) {
       var checkboxID = $(this).attr("ref");
       var checkbox = $('#'+checkboxID);
 
       if (checkbox.is(":checked")) {
         checkbox.removeAttr("checked");
 
       }else{
         checkbox.attr("checked","true");
       }
       $(this).toggleClass("checked");
 
       e.preventDefault();
 
    });
 
 
 
    /*
      For demo purposes only....shows/hides checkboxes.
    */
    $('#showCheckboxes').click(function(e) {
     $('.checkbox').toggle()
     e.preventDefault();
    });
 
$('.checkall').click(
 function() {
 $(this).find('input[type=checkbox]').attr('checked', true);
 },
 function() {
 $(this).find('input[type=checkbox]').attr('checked', false);
 });
 
 });

Je souhaiterais que mon boutons puisse sélectionner tout les éléments voir désectionner tout les éléments et que les images soient rafraichit lorsque tous les éléments sont checked ou non.

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
 
 
html
{
height: 100%;
background-color: none;
width: 100%;
margin-top: 3px;
font: 100 21px/0px helvetica;
}
 
 
.js .checkbox{
  display:none;
}
 
.toggle{
   background:url("../images/toggle.png") bottom left;
   display:block;
   width:70px;
   height:22px;
}
 
.toggle.checked{
  background-position:top left;
}

Merci.