Discussion :

[rebk2013]

Bonjour,
dans un formulaire j'ai une liste de checkbox, une div en dessous, j'aimerai que si l'on check une ou plusieurs des checkbox de cette liste, alors la div du dessous s'affiche. Si rien n'est coché elle reste cachée.

j'ai voulu faire :

Code html :

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
<li id="choix"><label>Choix: </label>
    <ol class="checkboxes">
        <li><input value="choix_1" type="checkbox" onclick="Change" name="choix[]" id="choix_1" />choix 1</li>
	<li><input value="choix_2" type="checkbox" onclick="Change" name="choix[]" id="choix_2" />choix 2</li>
	<li><input value="choix_3" type="checkbox" onclick="Change" name="choix[]" id="choix_3" />choix 3</li>
    </ol>
</li>
<div id="madiv"  style="visibility:hidden;"><p>blabla</p></div>
 
<script type="text/javascript">
function Change() {
    if (document.getElementById('choix_1').checked) || (document.getElementById('choix_2').checked) || (document.getElementById('choix_3').checked)
        document.getElementById('madiv').style.visibility=visible;
    }
    else(){
        document.getElementById('madiv').style.visibility=hidden;
    }
}
</script>

Je ne sais pas si je m'y prends bien ou mal ou même si il n'y a pas déjà des erreurs de syntaxe... si quelqu'un pouvait me filer un coup de main codé ça serait juste merveilleux !!

Merci !!

[SylvainPV]

Bonjour,

Essaie d'utiliser onchange plutôt que onclick (au cas où l'utilisateur utilise le clavier) et rajouter des parenthèses à l'appel de ta fonction Change

Code :

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

1
2
 
<input value="choix_1" type="checkbox" onchange="Change()" name="choix[]" id="choix_1" />choix 1

Par ailleurs, j'ai réécrit ton code en corrigeant quelques soucis potentiels et avec des méthodes un peu plus "modernes". Attention au support cependant : http://codepen.io/anon/pen/tbIrD

Code html :

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
 
<li id="choix"><label>Choix: </label>
    <ol class="checkboxes">
      <li>
        <input value="choix_1" type="checkbox" name="choix[]" id="choix_1" />
        <label for="choix_1">choix 1</label>
      </li>
	<li>
    <input value="choix_2" type="checkbox" name="choix[]" id="choix_2" />
    <label for="choix_2">choix 2</label>
  </li>
	<li>
    <input value="choix_3" type="checkbox" name="choix[]" id="choix_3" />
    <label for="choix_3">choix 3</label>
  </li>
  </ol>
</li>
<div id="madiv" style="display:none;"><p>blabla</p></div>

Code js :

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

1
2
3
4
5
6
7
8
 
var checkboxes = document.querySelectorAll("#choix .checkboxes input");
Array.prototype.slice.call(checkboxes).forEach(function(){
	this.addEventListener("change", function(){
		var someChecked = Array.prototype.some.call(checkboxes, function(box){ return box.checked; });
		document.getElementById('madiv').style.display = someChecked ? "block" : "none";
	});
});