Hallo, ich habe folgendes für die Einrichtung:

<form action="?" method="post" name="contactform">

<div class="question">
    <p><span><input type="radio" name="answer" value="Yes" onclick="showHide('one')"/></span> Yes</p>
</div>
<div id="one" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="No" onclick="showHide('two')"/></span> No</p>
</div>
<div id="two" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
    <p><input type="radio" name="answerdetail" value="Reason Four" /> Reason Four</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="Not sure" /></span> Not sure</p>
</div>

Wenn Sie das Formular zum ersten Mal sehen, sind nur 3 Kontrollkästchen sichtbar (Ja, Nein, Nicht sicher). Wenn Sie auf "Ja" klicken, werden die Unter-Kontrollkästchen für "Ja" angezeigt. Wenn Sie auf "Nein" klicken, werden die Unter-Kontrollkästchen für "Nein" angezeigt.

Ich möchte wissen, ob es möglich ist, jeweils nur einen Satz von Unter-Kontrollkästchen anzuzeigen.

Das heißt, Wenn jemand 'Ja' aktiviert, werden die Unter-Kontrollkästchen für 'Ja' angezeigt. Wenn sie dann ihre Meinung ändern und auf "Nein" klicken, verschwinden die Unter-Kontrollkästchen für "Ja" und die Unter-Kontrollkästchen für "Nein" werden angezeigt (d. H. Es ist immer nur ein Satz von Unter-Kontrollkästchen gleichzeitig sichtbar).

Ich hoffe das macht Sinn.

Jede Hilfe wäre sehr dankbar!

3
ade123 8 Okt. 2012 im 14:21

3 Antworten

Beste Antwort

JQuery verfügt über mehrere integrierte Methoden, die hierfür hilfreich sein sollten. Sie können .hide() / .show(), um die Sichtbarkeit der Elemente umzuschalten. Mit .next() können Sie den richtigen Antwortbereich auswählen. Um das Änderungsereignis zu behandeln, können Sie außerdem .change() verwenden, das ausgelöst wird Der Handler jedes Mal, wenn der Benutzer eine andere Option auswählt:

$(document).ready(function() {
    $('input[name="answer"]').change(function() {
        $(".answers").hide();
        $('input[name="answer"]:checked')
            .closest(".question")
            .next(".answers")
            .show();
    });
});
4
nbrooks 8 Okt. 2012 im 11:03

Der einfachste Weg, den ich mir angesichts Ihres HTML vorstellen kann:

$('input:radio').change(
    function(){
        $('.answers').slideUp();
        $(this).closest('div').next('.answers').slideDown();
    });​

JS Fiddle-Demo.

Verweise:

0
David says reinstate Monica 8 Okt. 2012 im 10:52

So würde ich das angehen:

Demo-Test: http://jsfiddle.net/earthdesigner/UYWx8/

0
earthdesigner 8 Okt. 2012 im 10:48