Multi checkbox et envoi des valeurs avec ajax

Version imprimable

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:

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:

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:

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

Bonjour,

1- Sélectionner tout

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

Code:

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:

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:

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

Code:

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:

json_decode($_POST['liste']);

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

Merci beaucoup voici mon code final :

HTML :

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
<!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:

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/>";
 }