Bon, j'ai fais un quelques choses, mais je trouve ça un peu compliqué pour ce que c'est.
Ça fonctionne impec! mais bon je suis sur qu'il y a moyen d'optimiser mieux que ce que j'ai réussi a faire.
Je t'ai concocté une source un peu générique, c'est a dire que tu peux mettre autant de champ checkbox que tu souhaites (rouge ou pas !
).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript">
<!--
function verifSelect() {
// on selectionne les checkbox all et allred puis le champ text
var checkboxSelectall = document.getElementById('coch_selectall');
var checkboxSelectallred = document.getElementById('coch_selectallred');
var secteur = document.getElementById('secteur');
secteur.value='';
// on selectionne les checkbox red et others
var boxOthers = document.getElementsByName('others');
var boxRed = document.getElementsByName('red');
var boxOthersCount = 0, boxRedCount = 0; // initialisations de compteurs
// Pour chaque checkbox others on regarde s'il est coché ou non afin de rajouter sa valeur dans le champ text
for ( var i=0; i < boxOthers.length; i++ ) {
if ( boxOthers[i].checked ) {
if (secteur.value!='') secteur.value += ', ';
secteur.value += ' '+boxOthers[i].value+' ';
boxOthersCount ++;
}
}
// On verifie si toutes les checkbox others sont coché ou non
if ( boxOthersCount == boxOthers.length ) allOthersSelected = true;
else allOthersSelected = false;
// Pour chaque checkbox red on regarde s'il est coché ou non afin de rajouter sa valeur dans le champ text
for ( var i=0; i < boxRed.length; i++ ) {
if ( boxRed[i].checked ) {
if (secteur.value!='') secteur.value += ', ';
secteur.value += ' '+boxRed[i].value+' ';
boxRedCount ++;
}
}
// On verifie si toutes les checkbox red sont coché ou non
if ( boxRedCount == boxRed.length ) allRedSelected = true;
else allRedSelected = false;
// Si toutes les checkbox sont cochées les checkbox all et allred doivent l'être aussi,
// si toutes les checkbox rouge sont cochées le checkbox allred doit l'être aussi,
// sinon aucune ne doit être cochées
if ( allRedSelected && allOthersSelected ) {
checkboxSelectall.checked = true;
checkboxSelectallred.checked = true;
}
else if ( allRedSelected ) {
checkboxSelectall.checked = false;
checkboxSelectallred.checked = true;
}
else {
checkboxSelectall.checked = false;
checkboxSelectallred.checked = false;
}
}
function selectall() {
var checkboxSelectall = document.getElementById('coch_selectall');
var checkboxSelectallred = document.getElementById('coch_selectallred');
var boxOthers = document.getElementsByName('others');
var boxRed = document.getElementsByName('red');
// si le checkbox all est coché on coche tous les checkbox !! (red et others)
if (checkboxSelectall.checked) {
for ( i=0; i < boxOthers.length; i++ ) boxOthers[i].checked = true;
for ( i=0; i < boxRed.length; i++ ) boxRed[i].checked = true;
checkboxSelectallred.checked = true; // si tout est coché le checkbox allred aussi ...
} else {
for ( i=0; i < boxOthers.length; i++ ) boxOthers[i].checked = false;
for ( i=0; i < boxRed.length; i++ ) boxRed[i].checked = false;
checkboxSelectallred.checked = false;
}
// Lancement de la vérification pour affichage du texte et complément sur les all et allred
verifSelect();
}
function selectallred() {
var checkboxSelectall = document.getElementById('coch_selectall');
var checkboxSelectallred = document.getElementById('coch_selectallred');
var boxRed = document.getElementsByName('red');
// si le checkbox allred est coché on coche tous les checkbox rouge !!
if (checkboxSelectallred.checked) {
for ( i=0; i < boxRed.length; i++ ) boxRed[i].checked = true;
} else {
for ( i=0; i < boxRed.length; i++ ) boxRed[i].checked = false;
checkboxSelectall.checked = false; // si le checkbox allred est décoché le all n'est plus actif
}
// Lancement de la vérification pour affichage du texte et complément sur les all et allred
verifSelect();
}
// -->
</script>
</head>
<body>
<input type="text" id="secteur" name="secteur" class="recherche" value="" size="160">
<ul>
<li><input type="checkbox" id="coch_selectall" name="seltout" value="valueSelectall" title="Selection de tout les inputs" onclick="selectall();">Tout selectionner</li>
<li><input type="checkbox" id="coch_selectallred" name="selrouge" value="valueSelectallred" title="Selection de tout les inputs rouges" onclick="selectallred();">Selectionner les rouges</li>
<li><input type="checkbox" name="others" value="valueVert" title="Selection de cet input" onclick="verifSelect();">Vert</li>
<li><input type="checkbox" name="others" value="valueBleu" title="Selection de cet input" onclick="verifSelect();">bleu</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueMarron" title="Selection de cet input" onclick="verifSelect();">marron</li>
<li><input type="checkbox" name="others" value="valueBleu" title="Selection de cet input" onclick="verifSelect();">bleu</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueJaune" title="Selection de cet input" onclick="verifSelect();">jaune</li>
<!-- <li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueMarron" title="Selection de cet input" onclick="verifSelect();">marron</li>
<li><input type="checkbox" name="others" value="valueBleu" title="Selection de cet input" onclick="verifSelect();">bleu</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueMarron" title="Selection de cet input" onclick="verifSelect();">marron</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueMarron" title="Selection de cet input" onclick="verifSelect();">marron</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li>
<li><input type="checkbox" name="others" value="valueMarron" title="Selection de cet input" onclick="verifSelect();">marron</li>
<li><input type="checkbox" name="red" value="valueRouge" title="Selection de cet input" onclick="verifSelect();">Rouge</li> -->
</ul>
</body>
</html>
J'ai commenté pour que ça soit a peu près compréhensible, si tu as une question n'hésite pas ...
Et si quelqu'un a un commentaire a faire sur mon code qu'il n'hésite pas non plus, je suis un peu noob aussi
KalNex[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]
).
