Essayer d'utiliser JavaScript (pas jQuery), montrer un div (2 classes) dans le code HTML lorsque la case est sélectionnée

Question

essentiellement je forme et il a 2 extensions différentes selon qu'un jour unique ou multi le voyage est sélectionné (pas encore codé, une fois que je travaille, je peux le trier correctement). J'ai regardé beaucoup de questions similaires mais malheureusement, beaucoup d'entre elles utilisent jQuery.

Je travaille là-dessus depuis 2 jours, Google, j'ai regardé ici et je suis arrivé jusqu'à présent sur la suggestion de mon tuteur, mais ce n'est pas tout à fait là et je ne comprends pas assez pour le réparer. J'espère que c'est quelque chose de simple et je suis juste un peu trop inexpérimenté à ce stade pour le reconnaître.

En ce moment, je suis juste essayer de faire un div avec 2 classes différentes montrent en fonction de ce qui est cliqué. Les classes codées en dur dans la fonction n'a pas d'importance pour l'instant. Finalement, je voudrai que les divs apparaissent (toujours en fonction de la case cochée) quand on clique sur le bouton Soumettre, mais cela peut être un effort futur (supposerait que c'est juste des instructions if/else.)

Si quelqu'un peut vous aider , ou même simplement me diriger dans la bonne direction (en gardant à l'esprit que j'ai commencé à apprendre cela il y a environ 3 semaines et que je ne l'ai même pas utilisé dans les 2 dernières) j'apprécierais grandement votre aide. du code actuel, et une image du résultat final de photoshop. (tout ce qui est en dessous de la ligne blanche horizontale sera caché jusqu'à ce qu'une case soit cochée)

Answer 1

Tout d'abord sous Cadres & Extensions, définissez la boîte de sélection pour No Wrap - dans le corps au lieu de onLoad. (En haut à gauche)

Deuxièmement, vous avez plusieurs erreurs de syntaxe.

Multi day<input type="checkbox" name="multi-day"   value="multi-day" onclick=""ShowExtraForm1('multiBooking')""> 

Retirer un ensemble de "" autour du ShowExtraForm1.

document.getElementById('singleBooking')style.display="none"; 
document.getElementById('multiBooking')style.display="none"; 

Ajouter un. avant l'attribut 'style', c'est actuellement une erreur de syntaxe.

Et aussi, où sont les formes réelles que vous essayez de cacher?

Answer 2

I have edited your jsfiddle link 

think its not working there but this is the function you want 

function ShowExtraForm1() 
    { 
     var singlechecksts; 
     var multichecksts; 
     singlechecksts= document.getElementById('singlecheck'); 
     multichecksts= document.getElementById('multicheck'); 

     if(singlechecksts.checked) 
     { 
     document.getElementById('singleBooking').style.display="block"; 
     document.getElementById('multiBooking').style.display="none"; 
     } 

     if(multichecksts.checked) 
     { 
     document.getElementById('singleBooking').style.display="block"; 
     document.getElementById('multiBooking').style.display="block"; 
     } 
    } 

where singlecheck and multicheck are id's of your checkboxs