隐藏和显示字段集

Question

我想用切换键隐藏/显示字段集。但它不会工作！有人可以帮帮我吗？我不知道我的代码有什么问题，我想切换它。最后两个字段集必须隐藏，并且必须通过单击单选按钮来启用。

<section> 
     <h1>Aanmelden</h1> 
      <p>Bent u geïnteresseerd in samenwerken met CMD Amsterdam? Dat kan!Tijdens de opleiding werken studenten aan projecten voor echte opdrachtgevers.Ook lopen de studenten stage, in het tweede en afstudeerjaar. 

      <em>CMD Amsterdam zoekt altijd naar positieve verbindingen met de creatieve stad Amsterdam.</em> 

      Voor het aanmelden van stageplekken of projecten kunt u onderstaand formulier invullen Wij nemen zo nodig contact met u op nadat het formulier is verstuurd. Voor vragen of opmerkingen kunt u <a href="contact.html">contact</a> met ons op. 
      </p> 
    </section> 
    <form> 
     <fieldset> 
      <legend>Contactgegevens</legend> 
      <label for="Naam">Naam</label> 
      <input id="Naam" type="text" required/> 
      <label for="Bedrijf">Bedrijf</label> 
      <input id="Bedrijf" type="text" required/> 
      <label for="Adres">Adres</label> 
      <input id="Adres" type="text" required/> 
      <label for="Postcode">Postcode</label> 
      <input id="Postcode" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" required/> 
      <label for="Plaats">Plaats</label> 
      <input id="Plaats" type="text" required/> 
      <label for="Telefoon">Telefoon</label> 
      <input id="Telefoon" type="text" required/> 
      <label for="Email">Email</label> 
      <input id="Email" type="text" required/> 

      Ik wil mijn aanmelden: 
      <input id="Project" type="radio" required/> 
      <label for="Project">Voor een project</label> 
      <input id="Stage" type="radio" required/> 
      <label for="Stage">Als stagebedrijf</label> 
     </fieldset> 
     <fieldset > 
      <legend>Project</legend> 
      <label for="Titel">Titel</label> 
      <input id="Titel" type="text"/> 
      <label for="Opdrachtomschrijving">Opdrachtomschrijving</label> 
      <input id="Opdrachtomschrijving" type="text"/> 
      <label for="Doelgroepomschrijving">Doelgroepomschrijving</label> 
      <input id="Doelgroepomschrijving" type="text"/> 
      <label for="Doelstelling">Doelstelling/intentie van het project</label> 
      <input id="Doelstelling" type="text"/> 
      <label for="Looptijd">Looptijd (maximaal 24 maanden)</label> 
      <input id="Looptijd" type="range" min="1" max="24"/> 
      <label for="Deadline">Deadline</label> 
      <input id="Deadline" type="date"/> 
      Geschikt voor 
      <input id="eerstejaars" type="radio"/> 
      <label for="eerstejaars">Eerstejaars studenten</label> 
      <input id="tweedejaars" type="radio"/> 
      <label for="tweedejaars">Tweedejaars studenten</label> 
      <input id="derdejaars" type="radio"/> 
      <label for="derdejaars">Derdejaars studenten</label> 
      <input id="afstudeer" type="radio"/> 
      <label for="afstudeer">Afstudeer studenten</label> 
      <input id="onbekend" type="radio"/> 
      <label for="onbekend">Onbekend</label> 
      Opmerkingen? 
      <input id="opmerkingen" type="text"/> 
     </fieldset> 
     <fieldset> 
      <legend>Stage</legend> 
      Geschikt voor: 
      <input id="tweedestage" type="radio"/> 
      <label for="tweedestage">Tweedejaars studenten</label> 
      <input id="afstudeerders" type="radio"/> 
      <label for="afstudeerders">Afstudeer studenten</label> 
      <input id="nietbekend" type="radio"/> 
      <label for="nietbekend">Onbekend</label> 

      Hoe lang is de stage? 
      <input id="tien" type="radio"/> 
      <label for="tien">Tien weken</label> 

      <input id="twintig" type="radio"/> 
      <label for="twintig">Twintig weken</label> 
      <input id="unknown" type="radio"/> 
      <label for="unknown">Onbekend</label> 
      <label for="begindatum">Begindatum</label> 
      <input id="begindatum" type="date"/> 
      <label for="werkzaamheden">Beschrijving werkzaamheden</label> 
      <input id="werkzaamheden" type="text"/> 
      Beschrijving stagebedrijf 
      <label for="bedrijfsnaam">Bedrijfsnaam</label> 
      <input id="bedrijfsnaam" type="text" required/> 
      <label for="address">Adres</label> 
      <input id="address" type="text" autocomplete="off"/> 
      <label for="zip">Postcode</label> 
      <input id="zip" type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2} 
      "/> 
      <label for="woonplaats">Plaats</label> 
      <input id="woonplaats" type="text" required/> 
      <label for="sector">Sector</label> 
      <input id="sector" type="text"/> 
      <label for="core">Core Business</label> 
      <input id="core" type="text"/> 
      Opmerkingen? 
      <input id="opmerking" type="text"/> 
     </fieldset> 
     <input id="verzenden" type="submit"/> 
</form> 


</body> 



body{ 
    background: #efefef; 
    min-height: 100%; 
    font: 100%/1.5 helvetica, arial; 
    } 

label { 
display: block; 
margin: 0 0 1em; 
} 
label > input { 
display: block; 
} 

input[type="radio"] + label{ 
    display: inline; 
} 

input, button { 
    font: inherit; 
} 
fieldset{ 
    background: linear-gradient(45deg, #fff, lime); 
} 

    .is-invisible{ 
    display: none; 
} 
    .is-visible { 
    display: block; 
    } 

JAVASCRIPT：

var fieldset = document.querySelector('fieldset:nth-of-type(2,3)'); 

    fieldset.classlist.add('hidefieldset'); 

    document.querySelector('input[type="radio"]').onclick = function() { 
    fieldset.classList.add('showfieldset'); 
} 

    document.querySelector('input[type="radio"]:last-of-type').onclick = function() { 
fieldset.classlist.remove('showfieldset'); 
} 

感谢您的帮助XX

Answer 1

我将与jQuery的切换方法接近你的问题。首先，我创建了一个带有一类切换的按钮。所以每次用户点击按钮时，fieldset元素的内容都会在每次点击事件时显示和隐藏。 但由于按钮具有默认操作实际提出的东西同样的方式固定链接做，

下面的代码

$(document).ready(function() { 
    $(".toggle").click(function(e) { 
     e.preventDefault(); 
     $("fieldset").toggle(); 
    }) 
}) 

Jsfiddle

Answer 2

如果你不能使用jQuery id设置上输入

 <input id="Project" type="radio" name="ps" required/> 
     <label for="Project">Voor een project</label> 
     <input id="Stage" type="radio" name="ps" required/> 
     <label for="Stage">Als stagebedrijf</label> 

和使用脚本

function $(id){ 
    return document.getElementById(id); 
} 
var fieldset = [ $('fProject'), $('fStage') ]; 

fieldset[0].style.display = 'none'; 
fieldset[1].style.display = 'none'; 

$('Project').onclick = function() { 
    fieldset[0].style.display = 'block'; 
    fieldset[1].style.display = 'none'; 
}; 

$('Stage').onclick = function() { 
    fieldset[1].style.display = 'block'; 
    fieldset[0].style.display = 'none'; 
}; 

Answer 3

我所做的是：

<legend class="legend"> 
    <div style="display:none;"> 
     ... content ... 
    </div> 

使用jQuery

然后：

$(".legend").click(function(e) { $(this).next("div").toggle(); }); 

这将让联想看到和点击。 向用户展示它可用一些CSS点击：

.legend { cursor: pointer; }