3 cases montrant même div (display: none)

Je ne sais pas grand-chose sur le codage et je dois construire ce formulaire avec 3 zones/divs différents (A, B, C), où:3 cases montrant même div (display: none)

A - toujours représenté, commande l'affichage de B et C

B - affiche si les cases 1,2 et/ou 3 sur A sont choisis

C - affiché si la case 4 sur A est choisi

Alors, ce que je suis arrivé à ce jour était:

<head> 
<script type="text/javascript"> 
<!-- 
function showMe (it, box) { 
    var vis = (box.checked) ? "block" : "none"; 
    document.getElementById(it).style.display = vis; 
} 
//--> 
</script> 
</head> 

<body> 
<form> 
<input type="checkbox" value="value1" onclick="showMe('div1', this)" />value1 
<input type="checkbox" value="value2" onclick="showMe('div1', this)" />value2 
<input type="checkbox" value="value3" onclick="showMe('div1', this)" />value3 
<input type="checkbox" value="value4" onclick="showMe('div2', this)" />value3 
</form> 

<div id="div1" style="display:none;">Show Div 1</div> 
<div id="div2" style="display:none;">Show Div 2</div> 

</body>

La chose est, si je vérifie 1,2 et/ou 3, Div B montre bien, mais si je décocher un d'entre eux, div B cache. J'ai besoin de div B pour montrer quand l'un d'entre eux est vérifié.

L'attribution d'un div différent à chaque case à cocher ne fonctionnera pas puisque toutes les cases à cocher "activent" la même zone de formulaire (div).

Des sugestions?

Source

2011-09-29 user971875

À l'heure actuelle, votre gestionnaire d'événements prend uniquement en compte la case à cocher à l'origine de l'événement. Ce qu'il faut vraiment faire, c'est interroger chacune des trois cases à cocher pour voir si certaines d'entre elles sont vérifiées au moment de l'événement.

il est donc logique pour la logique à maintenir dans votre gestionnaire d'événements:

<head> 
<script type="text/javascript"> 
<!-- 
function updateVis() { 
    var show1 = 
     (document.theForm.input1.checked) 
     || (document.theForm.input2.checked) 
     || (document.theForm.input3.checked) ? "block" : "none"; 
    document.getElementById("div1").style.display = show1; 

    var show2 = (document.theForm.input4.checked) ? "block" : "none"; 
    document.getElementById("div2").style.display = show2; 
} 
//--> 
</script> 
</head> 

<body> 
<form name="theForm"> 
<input name="input1" type="checkbox" value="value1" onclick="updateVis()" />value1 
<input name="input2" type="checkbox" value="value2" onclick="updateVis()" />value2 
<input name="input3" type="checkbox" value="value3" onclick="updateVis()" />value3 
<input name="input4" type="checkbox" value="value4" onclick="updateVis()" />value3 
</form> 

<div id="div1" style="display:none;">Show Div 1</div> 
<div id="div2" style="display:none;">Show Div 2</div> 

</body>

Source

2011-09-29 20:19:04

OUI! Cela fonctionne magnifiquement! Ai-je mentionné que je t'aime? = D Merci beaucoup! – user971875

3 cases montrant même div (display: none)

Répondre

Questions connexes