javascript - 隐藏和显示字段集

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

我所做的是:

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

然后使用 jQuery:

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

这将使图例保持可见和可点击。使用一些 CSS 向用户显示它是可点击的:

.legend { cursor: pointer; }