Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

jquery trigger from

bewerkt do 27 feb 2014 in Javascript, jQuery etc.. Posts: 12
beste,

ik ben bezig met een formulier voor een klant van mij,
nu ben ik zelf niet thuis in jquery / javascript

nu is het zo dat in de onderstaande html blok style="display: none;" zit,
daar wil ik een trigger van maken met jquery zo dat de gebruiker checkbox aan vinkt
de bij behorende values zicht baar velden worden

hoe kan ik dit het beste doen ?



<li class="first_item">Ik wil mij inschrijven voor:
<ul class="children">
<li>
<input class="checkbox" type="checkbox" id="1" name=""> <label for="1">Autocross / Caravanrace </label>
<ul class="" style="display: none;">
<li><label for="merk">Merk Auto :</label><br><input class="input" type="text" id="merk" name="merk"></li>
<li><label for="vermogen">Vermogen van de auto :</label><br><input class="input" type="text" id="vermogen" name="vermogenauto"></li>
<li> <label>Turbo : </label><br>
<label for="true">Ja </label><input class="" type="radio" id="true" name="turbo" value="true"> |
<label for="false">Nee </label><input class="" type="radio" id="false" name="turbo" value="false">
</li>
<li><label>Caravanrace : </label><br>
<label for="yes">Ja </label><input class="" type="radio" id="yes" name="caravanrace" value="true"> |
<label for="no">Nee </label><input class="" type="radio" id="no" name="caravanrace" value="false">
</li>
</ul>
</li>
<li><input class="checkbox" type="checkbox" id="2" name=""> <label for="2">Trekkerslep</label></li>
<li><input class="checkbox" type="checkbox" id="3" name=""> <label for="3">Pruts- & Knutselrace</label></li>
<li><input class="checkbox" type="checkbox" id="4" name=""> <label for="4">Blubbering</label></li>
</ul>


met vriendelijke groet Harrit

Reacties

  • PMPosts: 879
    zoiets bedoel je:

    <script type="text/javascript">
    function ExposeList() {
    var status = document.getElementById('1').checked;
    if (status == true) { document.getElementById('checkbox1').style.display = "block"; }
    else { document.getElementById('checkbox1').style.display = 'none'; }
    }
    </script>


    <li class="first_item">Ik wil mij inschrijven voor:
    <ul class="children">
    <li>
    <input class="checkbox" type="checkbox" id="1" onclick="ExposeList()"><label for="1">Autocross / Caravanrace </label>

    <div id="checkbox1" style="display:none"> <!-- te tonen div met unieke id; bij aanvinken show div -->
    <ul>
    <li><label for="merk">Merk Auto :</label><br><input class="input" type="text" id="merk" name="merk"></li>
    <li><label for="vermogen">Vermogen van de auto :</label><br><input class="input" type="text" id="vermogen" name="vermogenauto"></li>
    <li> <label>Turbo : </label><br>
    <label for="true">Ja </label><input class="" type="radio" id="true" name="turbo" value="true"> |
    <label for="false">Nee </label><input class="" type="radio" id="false" name="turbo" value="false">
    </li>
    <li><label>Caravanrace : </label><br>
    <label for="yes">Ja </label><input class="" type="radio" id="yes" name="caravanrace" value="true"> |
    <label for="no">Nee </label><input class="" type="radio" id="no" name="caravanrace" value="false">
    </li>
    </ul>
    </div> <!-- einde div checkbox1 -->

    </li>
    <li><input class="checkbox" type="checkbox" id="2" name=""> <label for="2">Trekkerslep</label></li>
    <li><input class="checkbox" type="checkbox" id="3" name=""> <label for="3">Pruts- & Knutselrace</label></li>
    <li><input class="checkbox" type="checkbox" id="4" name=""> <label for="4">Blubbering</label></li>
    </ul>
    </li>

    Demo
  • gewelig nuet,
    dit is wat ik zoekte ..

    supper bedankt ;)
Login of Registreer om te reageren.