Discussion :

[guillaumeIOB]

Bonsoir a tous,

Je suis en train de tester un petit script.

J'ai une liste de checkbox et en fin de liste un bouton pour tous les selectionner.

En fin de script j'ai des liens qui lance une action onclick qui devrait au travers d'ajax envoyer les valeurs selectionnées.

Mes questions :

Je souhaiterai que l'envoi des valeurs s'effectue soit en cochant a la volée des checkbox, soit en cliquant sur tous, et evidemment que l'envoi traite les valeurs.

Or j'ai beau tenter de comprendre, je n'arrive pas a envoyer les données autrement qu'en passant par un bouton submit, alors que moi j'ai juste deux liens avec une action onclick

Merci pour toute votre aide :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="application/javascript">
function checkAllBox(ref, name) {
    var form = ref;
    while (form.parentNode && form.nodeName.toLowerCase() != 'form') { form = form.parentNode; }
    var elements = form.getElementsByTagName('input');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type == 'checkbox' && elements[i].name == name) {
            elements[i].checked = ref.checked;
        }
    }
}
</script>

Code html :

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

1
2
3
4
5
6
7
8
9
<input type="checkbox" name="choix[]" id="choix[]" value="A">
<input type="checkbox" name="choix[]" id="choix[]" value="B">
<input type="checkbox" name="choix[]" id="choix[]" value="C">
<input type="checkbox" name="choix[]" id="choix[]" value="D">
 
<input type="checkbox" onclick="checkAllBox(this, 'choix[]');" /> <b>Tout Séléctionner</b>
 
<a href="javascript:;" onclick="sendcheck('toto')">toto</a>
<a href="javascript:;" onclick="sendcheck('tata')">toto</a>

C'est au niveau de la fonciton sendcheck que ça bloque chez moi :
La fonction de base je l'ai mais je ne vois pas comment je peux placer dans les variables les valeurs des checkbox selectionnées :
Je precise que dans ma fonction ajax, j'ai utilisé a la fois POST et GET car je n'arrive pas a faire fonctionner le script sans les deux réunis (bizarrerie je sais)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function sendcheck(idA) {
 
// je sais gérer une checkbox :  if(document.getElementById(idB).checked == true){idB = '1';}else{idB = '0';} mais je ne vois pas comment je peux le faire avec le multicheckbox
 
var xhr_object = null;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;}
xhr_object.open("POST", "validerlechoix.php?personne="+idA+"&liste="+idB, true);
xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "personne="+idA+"&liste="+idB;
xhr_object.send(data);
}

Merci pour toute votre aide et bonne soirée

[Invité]

Bonjour,

1- Sélectionner tout

1a- on met une classe, pas des id :

Code html :

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

1
2
3
4
5
6
<input type="checkbox" name="choix[]" class="choix" value="A">
<input type="checkbox" name="choix[]" class="choix" value="B">
<input type="checkbox" name="choix[]" class="choix" value="C">
<input type="checkbox" name="choix[]" class="choix" value="D">
 
<label><input type="checkbox" onclick="checkAllBox('.choix');" /> <b>Tout Sélectionner</b></label>

1b- on utilise querySelectorAll :

Code JavaScript :

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

1
2
3
4
5
6
function checkAllBox(id_class) {
  var elts = document.querySelectorAll(id_class);
  elts.forEach(function(elt) {
    elt.checked = elt.checked ? false : true; // coche-décoche toutes les checkbox
  });
}

2- Récupérer et envoyer via Ajax

Code html :

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

1
2
<a href="javascript:;" onclick="sendcheck('toto','.choix')">toto</a>
<a href="javascript:;" onclick="sendcheck('tata','.choix')">tata</a>

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function sendcheck(nom, id_class) {
  var elts = document.querySelectorAll(id_class);
  var i = 0;
  var array_val = []; // array
  elts.forEach(function(id) {
    if (id.checked) {
      array_val[i] = id.value; // on récupère les value des cases cochées
      i++;
    }
  });
  var liste_val = (array_val.length > 0) ? JSON.stringify(array_val) : ""; // liste au format JSON
  alert(liste_val);
}

Et dans le fichier PHP, on récupère avec json_decode() :

Code php :

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

json_decode($_POST['liste']);

3- GET et POST : au lieu de dire "Tant pis !", ce serait mieux de savoir pourquoi, et de corriger !

[guillaumeIOB]

Merci beaucoup voici mon code final :

HTML :

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
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="application/javascript">
function checkAllBox(id_class) {
  var elts = document.querySelectorAll(id_class);
  elts.forEach(function(elt) {
    elt.checked = elt.checked ? false : true; // coche-décoche toutes les checkbox
  });
}
 
function sendcheck(equipe, id_class) {
  var elts = document.querySelectorAll(id_class);
  var i = 0;
  var array_val = []; // array
  elts.forEach(function(id) {
    if (id.checked) {
      array_val[i] = id.value; // on récupère les value des cases cochées
      i++;
    }
  });
  var liste_val = (array_val.length > 0) ? JSON.stringify(array_val) : ""; // liste au format JSON
  alert(liste_val);
 
var xhr_object = null;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else {alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");return;}
xhr_object.open("POST", "testcheck_rep.php?equipe="+equipe+"&liste="+liste_val, true);
xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {document.getElementById("liste_checkbox").innerHTML = xhr_object.responseText;}}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "equipe="+equipe+"&liste="+liste_val;
xhr_object.send(data);
}
</script>
</head>
 
<body>
 
<input type="checkbox" name="choix[]" class="choix" value="Alain"> Alain<br />
<input type="checkbox" name="choix[]" class="choix" value="Benoit"> Benoit<br />
<input type="checkbox" name="choix[]" class="choix" value="Christophe"> Christophe<br />
<input type="checkbox" name="choix[]" class="choix" value="Denis"> Denis<br />
 <br />
<label><input type="checkbox" onclick="checkAllBox('.choix');" /> <b>Tout Sélectionner</b></label>
 
<a href="javascript:;" onclick="sendcheck('toto','.choix')">toto</a>
<a href="javascript:;" onclick="sendcheck('tata','.choix')">tata</a>
<br /><hr />
<div id="liste_checkbox" name="liste_checkbox"></div>
 
</body>
</html>

PHP :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
header('Content-Type: application/json');
$equipe = @$_GET["equipe"];  
echo 'equipe '.$equipe.'<br>';
$liste=json_decode($_POST['liste']);
echo 'liste '.$liste.'<br>';
 
foreach ($liste as $key => $value) {
    echo "Ex avec la boucle foreach :  ".$liste[$key] . "<br/>";
 }