Wie kann ich einen Schalter ausblenden, wenn es einen anderen gibt und wenn der Benutzer den inneren zeigt und Sie den äußeren verstecken, bleibt der innere dort? Es sollte auch versteckt sein.

Ich war mir nicht sicher, daher hier das aktualisierte Beispiel: http://jsfiddle.net/jalxob/hEusd/5 /

$('input[type="checkbox"]').click(function(){
if($(this).val()=="checking"){
    $(".open-box").toggle();
    if("none" == $(".open-box").css("display")) { 
        $(".box1").css("display", "none");
    }
}
});

$('.open-box').click(function() {
$(".box1").slideToggle();
});
0
user2989327 6 Dez. 2013 im 23:16

4 Antworten

Beste Antwort

Dies löst das Problem und ist eine einfache Lösung: http://jsfiddle.net/digitalextremist/2PcWV/2

<input type="checkbox" value="checking">

<div class="box1">
    <a href="#" class="open-box">Show next box</a>
    <div class="box2"></div>
</div>

UPDATE:

Nachdem Sie dies klargestellt haben, finden Sie hier einen neuen Ausschnitt: http://jsfiddle.net/digitalextremist/Jm4L6/1

Dies ist das:

$('input[type="checkbox"]').click(function () {
    if (this.checked) {
        $(".open-box").show();
    } else {
        $(".open-box").hide();
        $(".box1").hide();
    }
});

$('.open-box').click(function () {
    $(".box1").slideToggle();
});

Mit diesem HTML:

<input type="checkbox"> <a href="#" class="open-box">Show next box</a>

<div class="box1"></div>

Hier geht es um Ideen, über die hier gesprochen wird: Wie kann überprüft werden, ob in jQuery ein Kontrollkästchen aktiviert ist?

Dieses dritte Update sollte alles abdecken, was Sie gefragt haben:

http://jsfiddle.net/digitalextremist/Jm4L6/2/

0
Community 23 Mai 2017 im 12:29

Sie sollten $(this).val()=="checking" nicht verwenden, da immer true zurückgegeben wird, unabhängig davon, ob das Kontrollkästchen aktiviert ist oder nicht.

Ich würde mit so etwas gehen:

http://jsfiddle.net/hEusd/12/

0
JCHebert 6 Dez. 2013 im 19:48

In Ihrer jsfiddle befindet sich box2 nicht in box1. Wenn Sie es in box1 legen, wird es ausgeblendet. Wenn Sie es draußen lassen müssen, fügen Sie Folgendes hinzu:

$('input[type="checkbox"]').click(function(){
    if($(this).val()=="checking"){
        $(".box1").toggle();
        if("none" == $(".box1").css("display")) { // ADD THIS IF BLOCK
            $(".box2").css("display", "none");
        }
    }
});

$('.open-box').click(function() {
    $(".box2").slideToggle();
});
0
elixenide 6 Dez. 2013 im 19:20

Sie müssen beide Kästchen in einen Container einfügen und so ändern, dass durch Klicken auf das Kontrollkästchen das Container-Div umgeschaltet wird.

Siehe Beispiel hier: JSFiddle

Ich habe den HTML-Code geändert, um beide Felder in einem div wie folgt einzufügen:

<input type="checkbox" value="checking">
<div class="box-container">
    <div class="box1">
        <a href="#" class="open-box">Show next box</a>
    </div>
    <div class="box2"></div>
</div>

Und änderte das Kontrollkästchen-Klickereignis, um den Container umzuschalten:

$(".box-container").toggle();
0
soupy1976 6 Dez. 2013 im 19:24