✔ Bei reset auch Box schließen

[CreativPur]

Hallo.. Ich habe folgendes Problem..

Ich habe 4 Radio-Button. Wenn ich diese anklicke öffnet sich darunter eine Info-Box.
Das funktioniert auch.

Wenn ich aber das Formular reseten möchte bleibt die letzte Box, welche ich angeklickt habe noch offen.
Diese sollte sich natürlich auch bei einem Reset schließen..

Folgende habe ich versucht...

<label class="radio-inline">
                                          <input type="radio" name="antwort" id="zugesagt" value="red"> zugesagt
                                        </label>
                                        <label class="radio-inline">
                                          <input type="radio" name="antwort" id="bearbeitung" value="green"> Antwort benötigt Zeit
                                        </label>
                                        <label class="radio-inline">
                                          <input type="radio" name="antwort" id="vergeben" value="blue"> Die Stelle ist schon vergeben
                                        </label>
                                        <label class="radio-inline">
                                          <input type="radio" name="antwort" id="nicht_zugesagt" value="yellow"> leider nicht zugesagt
                                        </label>


<div class="red box">blabla</div>
<div class="green box">blabla</div>
<div class="red blue">blabla</div>
<div class="red yellow">blabla</div>

<button type="submit" class="btn btn-success"> antworten</button>
                                        <button type="reset" class="btn btn-default" onclick="document.onclick = .box.close()" >Eintragungen löschen</button>

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
            $(".box").close();
        }
        if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
            $(".box").close();
        }
        if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
            $(".box").close();
        }
        if($(this).attr("value")=="yellow"){
            $(".box").not(".yellow").hide();
            $(".yellow").show();
            $(".box").close();
        }
    });
});

 

[SpiceLab]

Die Lösung steckt doch schon in deinem jQuery-Script!

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
            $(".box").close();
        }
        if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
            $(".box").close();
        }
        if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
            $(".box").close();
        }
        if($(this).attr("value")=="yellow"){
            $(".box").not(".yellow").hide();
            $(".yellow").show();
            $(".box").close();
        }
    });
    // beim Zurücksetzen des Formulars die Box schließen
    $('button[type="reset"]').click(function(){
       $(".box").close();
    });
});

Der onclick-Event im <button> entfällt somit.

 

[CreativPur]

Danke für die super schnelle Antwort..

Deine Ergänzung ist einleuchtend,
aber leider funktioniert es nicht..

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="rot"){
            $(".box").not(".rot").hide();
            $(".rot").show();
        }
        if($(this).attr("value")=="blau"){
            $(".box").not(".blau").hide();
            $(".blau").show();
        }
        if($(this).attr("value")=="gruen"){
            $(".box").not(".gruen").hide();
            $(".gruen").show();
        }
        if($(this).attr("value")=="yellow"){
            $(".box").not(".yellow").hide();
            $(".yellow").show();
        }
    });
        $('button[type="reset"]').click(function(){
        $(".box").close();
    });
});

 

[SpiceLab]

Mit .hide() komme ich direkt zum Erfolg

// beim Zurücksetzen des Formulars die Box verstecken
    $('button[type="reset"]').click(function(){
       $(".box").hide();
    });

 

[CreativPur]

Super...
Vielen Dank...

Der Tag wird gut und ich immer schlauer... Danke