Feld anzeigen wenn ein radio-button mit Hilfe von jQuery geprüft

Ich habe den folgenden code:

    <fieldset>
        <legend>Do you currently have SolidWorks</legend>

        <ul>
            <li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset id="boxReseller" style="display:none;">
        <legend>Who is your SolidWorks reseller?</legend>
        <ul>
            <li><label for=""><input type="radio" name="reseller" value="Cad Connect" /> Cad Connect</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Cadtek" /> Cadtek</label></li>
            <li><label for=""><input type="radio" name="reseller" value="CCSL" /> CCSL</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Innova" /> Innova</label></li>
            <li><label for=""><input type="radio" name="reseller" value="NT CAD/CAM" /> NT CAD/CAM</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Engineer" /> Solid Engineer</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Ireland" /> Solid Solutions Ireland</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Management" /> Solid Solutions Management</label></li>
            <li><label for=""><input type="radio" name="reseller" value="TMS Scotland" /> TMS Scotland</label></li>
        </ul>

    </fieldset>

Was ich tun möchte ist ausblenden der zweiten fieldset standardmäßig, und wenn eine person wählt ja dann die box erscheinen, und wenn Sie wählen Sie " ja "oder" Nein, ist Sie nicht ausgewählt ist, dann wird die box wieder ausblenden.

Kann jemand helfen? Danke.

InformationsquelleAutor Cameron | 2010-09-24
  1. 1

    Ref Nick Craver - Schöne Lösung, obwohl es mehr felxaible wie unten

      $("input[name='solidworks']").change(function() {
    $("#boxReseller").toggle();
 });​​​​​​
$("input[name='solidworks']:checked").change(); //trigger correct state onload

    Durch verlassen der Knebel als wild card (undefiniert, welcher Terminologie Sie bevorzugen) ich fand es war mehr effizient. Aber schön, vielen Dank 🙂

    • Das funktioniert nicht mehr effizient, weil es nicht passt der "Arbeit" - Teil unter vielen Bedingungen. Browser-caching, anklicken, bevor document.ready, oder geht zurück auf die gleiche Seite bleibt das wechseln in den gegenüber Stand. Jeder dieser drei brechen der Ansatz in dieser Antwort...das ist der Grund, warum ich explizit überprüfen Sie den Wert.
    InformationsquelleAutor Peter
  2. 16

    Könnte man dies tun:

    $("input[name='solidworks']").change(function() {
  $("#boxReseller").toggle(this.value == "Yes");
});​​​​​​
$("input[name='solidworks']:checked").change(); //trigger correct state onload

    Sie können es versuchen mit dem markup in der Frage hier, und versuchen, die pre-checked "ja" version hier.

    • Eine bessere Antwort als meine 🙂
    • Das funktioniert großartig, können Sie erklären, wie es funktioniert bitte wie es scheint eine Menge verwirrender als der standard-if-und else-Anweisungen andere benutzt haben, aber besser funktioniert.
    • Sicher 🙂 Die .toggle(bool) nimmt einen booleschen Wert, ob der Anruf .show() (wenn true) oder .hide() (wenn false), so sind wir nur überprüfen, dass die radio-button, die gerade geändert wurde, das "ja" ein oder nicht. Die Letzte Zeile wird die ausgewählte und läuft der Hundeführer auf es...wieder, wenn sein Wert "ja" zeigt, da es sonst blendet, sinnvoll?
    • eine sehr elegante Lösung, ich werde hinzufügen zu meiner toolbox! (Wenn du swing, die Art und Weise, können Sie diese auch terser: entfernen Sie die Letzte Zeile und schreiben die Dritte Zeile als }).filter(':checked').change();.)
    • Ich bin nur zu lernen, jQuery (und JS). In meinem app ist es möglich, dass weder radio-button wird zunächst geprüft, in welchem Fall die Letzte Zeile nicht wählen Sie alles, was zum auslösen. Wie gehe ich mit so einem Fall?
    • Never mind... ich habe gerade realisiert, dass ich die verpasste "style=display:none", die bewirkt, dass die zweite Gruppe von radio-buttons werden zunächst ausgeblendet.

    InformationsquelleAutor Nick Craver
  3. 3

    Demo

    http://jsfiddle.net/Wpt3Y/

    jQuery(function(){
        jQuery("input[name=solidworks]").change(function(){          


            if ($(this).val() == "Yes") {
            jQuery("#boxReseller").slideDown()
            }
            else {
            jQuery("#boxReseller").slideUp();
            }                                                            
       });
});

    • Was ist, wenn ein Benutzer die Seite aktualisiert und die ja schon überprüft? Die box versteckt ist.
    • in diesem Fall müssen Sie überprüfen Sie den Wert des radio am DOM bereit und verstecken/zeigen Sie Ihre BOX
    InformationsquelleAutor Praveen Prasad
  4. 0
    $(document).ready(function() {
    $("input[name=solidworks]").change(function() {
        if ($this).val() == "Yes") {
            $("#boxReseller").slideDown('fast');
        }
        else {
            $("#boxReseller").hide('fast');
        }
    })
})
    InformationsquelleAutor Liam Bailey
  5. 0

    So etwas wie (Sorry, wenn es gibt Tippfehler, mein Kaffee ist nicht gemacht, noch).:

     <fieldset id="fs">
        <legend>Do you currently have SolidWorks</legend>

        <ul>
            <li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li>
        </ul>
    </fieldset>

    Gibt es Möglichkeiten, diese besser Aussehen, aber mein Kaffee wird nicht vorgenommen. Bearbeiten, sobald ich mein Elixier.

    <script>attr('checked','checked')
     $("#fs:checkbox").click(function(){
              if($("#rdYes:checked").attr('checked','checked'))
              {
                 $("#boxReseller").css('display', 'block'); })
              }          
     });
</script>
    • Unneccesary-code: wenn Sie auf die Nein-radio wird automatisch decheck die ja
    InformationsquelleAutor Ryan Ternier
Schreibe einen Kommentar