balise checkbox generale

**titi89** · 10/07/2011, 13h58

Bonjour,

Dans un formulaire, j'ai des checkbox dans un while (3 par ligne)
en gros ça donne :

------------------------------
ligne 1 : [] [] []
------------------------------
ligne 2 : [] [] []
------------------------------
ligne 3 : [] [] []
------------------------------
etc...
Donc, les checkbox ont cette forme :

Code :

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

1
2
3
4
 
<input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="a[<?php echo $liste['id']; ?>]" value="1" />
<input type="checkbox" name="b[<?php echo $liste['id']; ?>]" id="b[<?php echo $liste['id']; ?>]" value="1" />
<input type="checkbox" name="c[<?php echo $liste['id']; ?>]" id="c[<?php echo $liste['id']; ?>]" value="1" />

Je souhaiterais qu'au debut je puisse mettre une autre checkbox qui cocherais ou décocherais toutes les checkbox.

J'ai esayé

Code :

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

1
2
 
<input name="tout_cocher" type="checkbox" value="1" onclick="document.getElementById('a[]').checked=this.checked;document.getElementById('b[]').checked=this.checked;document.getElementById('c[]').checked=this.checked;" />

Mais ça marche pas...

Merci par avance pour votre aide

**David55** · 10/07/2011, 16h08

Voici ce qu'il faut faire en gros

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
<html>
<head>
...
 
<script type="text/javascript">
<!--
// ==========================
// Script réalisé par Eric Marcus - Aout 2006
// ==========================
 
// conteneur = id du bloc (<div>, <p> ...) contenant les checkbox
// a_faire = '0' pour tout décocher
// a_faire = '1' pour tout cocher
// a_faire = '2' pour inverser la sélection
 
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
	while (Chckbox!=null) {
		if (Chckbox.nodeName=="INPUT")
			if (Chckbox.getAttribute("type")=="checkbox") {
				blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
				document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
}
//-->
</script>
...
 
</head>
 
<body>
<form>
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Tout décocher" onClick="GereChkbox('div_chck','0');">&nbsp;&nbsp;&nbsp;
<input type="button" value="Inverser la sélection" onClick="GereChkbox('div_chck','2');">
<br /><br />
	<div id="div_chck">
	<input type="checkbox" name="checkbox1" id="checkbox1" value="1"><label for="checkbox1">Choix 1</label><br />
	<input type="checkbox" name="checkbox2" id="checkbox2" value="2"><label for="checkbox2">Choix 2</label><br />
	<input type="checkbox" name="checkbox3" id="checkbox3" value="3"><label for="checkbox3">Choix 3</label><br />
	<input type="checkbox" name="checkbox4" id="checkbox4" value="4"><label for="checkbox4">Choix 4</label><br />
	<input type="checkbox" name="checkbox5" id="checkbox5" value="5"><label for="checkbox5">Choix 5</label>
	</div>
</form>
</body>
</html>

**titi89** · 10/07/2011, 18h00

Merci David, c'est ce que je cherchais.

Par contre j'ai un petit soucis,

c'est que ça marche pas si mes checkbox sont dans un tableau.

par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="div_chck">
<table>
  <tr>
    <td><input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="a[<?php echo $liste['id']; ?>]" value="1" /></td>
    <td><input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="b[<?php echo $liste['id']; ?>]" value="1" /></td>
  </tr>
</table>
</div>

ne focntionne pas alors que

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table>
  <tr>
    <td>
      <div id="div_chck">
        <input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="a[<?php echo $liste['id']; ?>]" value="1" />
        <input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="b[<?php echo $liste['id']; ?>]" value="1" />
      </div>
    </td>
  </tr>
</table>

fonctionne. Il y a t'il une astuce pour que je puisse garder ma mise en forme (tableau) ?

Merci

**David55** · 10/07/2011, 18h16

Si tu met l'id dans ton tableau:

Code :

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

1
2
3
4
5
6
7
8
 
 
<table id="div_chck">
  <tr>
    <td><input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="a[<?php echo $liste['id']; ?>]" value="1" /></td>
    <td><input type="checkbox" name="a[<?php echo $liste['id']; ?>]" id="b[<?php echo $liste['id']; ?>]" value="1" /></td>
  </tr>
</table>

**titi89** · 11/07/2011, 10h31

Bonjour Davaid,

Hela non ça marche pas.

**jeca** · 11/07/2011, 11h35

Bonjour,

Donne le code html généré pour les 3 lignes.

**javatwister** · 11/07/2011, 11h54

ça me rappelle un vieux cas: http://javatwist.imingo.net/coch.htm

le code est tout en bas (page longue exprès)

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
<script type="text/javascript">
 
var indice;
var ch=document.getElementById("f").elements;
 
for(i=0;i!=ch.length;i++){
	if(ch[i].name!="mail"){
		ch[i].ind=i+1;
		ch[i].onclick=function(){
			indice=this.ind;
			while(ch[indice].name!=this.name && ch[indice].name!="main"){
				ch[indice].checked=this.checked;
				indice++;
			}
		}
	}
}
 
</script>

très adpaté aux structures hiérarchisées;

**titi89** · 11/07/2011, 12h07

Bonjour Jeca

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function GereChkbox(conteneur, a_faire) {
var blnEtat=null;
var Chckbox = document.getElementById(conteneur).firstChild;
	while (Chckbox!=null) {
		if (Chckbox.nodeName=="INPUT")
			if (Chckbox.getAttribute("type")=="checkbox") {
				blnEtat = (a_faire=='0') ? false : (a_faire=='1') ? true : (document.getElementById(Chckbox.getAttribute("id")).checked) ? false : true;
				document.getElementById(Chckbox.getAttribute("id")).checked=blnEtat;
			}
		Chckbox = Chckbox.nextSibling;
	}
}
//-->
</script>
</head>
<body>
 
<input type="button" value="Tout cocher" onClick="GereChkbox('div_chck','1');" /> 
 
  <div id="div_chck">
    <table width="96%" border="2" cellspacing="2" cellpadding="2">
      <tr>
        <td width="180" align="left" valign="middle">
	  <label><input name="journee[96]" type="checkbox" value="1" style="background-color:#00CC99;" onclick="document.getElementById('matin[96]').checked=this.checked;document.getElementById('repas[96]').checked=this.checked;document.getElementById('apres_midi[96]').checked=this.checked;">
	  <strong>lundi 04 Juillet 2011</strong></label>
        </td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="matin[96]" id="matin[96]" value="1" checked="checked" />
	</td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="repas[96]" id="repas[96]" value="1" checked="checked" />
	</td>
	<td width="70" align="center" valign="middle">
	    <input type="checkbox" name="apres_midi[96]" id="apres_midi[96]" value="1" checked="checked" />
        </td>
      </tr>
      <tr>
        <td width="180" align="left" valign="middle">
	  <label><input name="journee[100]" type="checkbox" value="1" style="background-color:#00CC99;" onclick="document.getElementById('matin[100]').checked=this.checked;document.getElementById('repas[100]').checked=this.checked;document.getElementById('apres_midi[100]').checked=this.checked;">
	  <strong>mardi 05 Juillet 2011</strong></label>
        </td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="matin[100]" id="matin[100]" value="1" checked="checked" />
        </td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="repas[100]" id="repas[100]" value="1" checked="checked" />
	</td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="apres_midi[100]" id="apres_midi[100]" value="1" checked="checked" />
	</td>
      </tr>
      <tr>
        <td width="180" align="left" valign="middle">
	  <label><input name="journee[104]" type="checkbox" value="1" style="background-color:#00CC99;" onclick="document.getElementById('matin[104]').checked=this.checked;document.getElementById('repas[104]').checked=this.checked;document.getElementById('apres_midi[104]').checked=this.checked;">
          <strong>mercredi 06 Juillet 2011</strong></label>
        </td>
	<td width="70" align="center" valign="middle">
						<input type="checkbox" name="matin[104]" id="matin[104]" value="1" checked="checked" />
	</td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="repas[104]" id="repas[104]" value="1" checked="checked" />
	</td>
	<td width="70" align="center" valign="middle">
	  <input type="checkbox" name="apres_midi[104]" id="apres_midi[104]" value="1" checked="checked" />
	</td>
      </tr>
    </table>
  </div>

C'est le premier input qui doit cocher tous les autres. (le input "journee" coche les trois de la ligne concernée, celui-ci fonctionne).

Merci

balise checkbox generale

JavaScript

Discussions similaires

Partager

Partager