eine Reihe von Divs aus Kontrollkästchen ausblenden auswählen

Ich habe eine komplexe Form, die ich erstellt habe, aber ich habe ein Gehirn verblassen beim Versuch, eine jQuery zu konstruieren, um eine bestimmte Reihe von DIVS zu verbergen. Was ich will, ist für eine dieser Divs zu verstecken, wenn das Kontrollkästchen aktiviert ist. Die nächstgelegene ich bekam haben, ist dieseeine Reihe von Divs aus Kontrollkästchen ausblenden auswählen

jQuery(document).ready(function(jQ) { 
 
    jQ(".HideRow").click(function() { 
 
    if (jQ(this).is(":checked")) { 
 
     (jQ(this).closest('.wrapper').find('.hideme1, .hideme2, .hideme3').hide()); 
 
    } else { 
 
     (jQ(this).closest('.wrapper').find('.hideme1, .hideme2, .hideme3').show()); 
 
    } 
 
    }); 
 
});

.form-group { 
 
    clear: both; 
 
} 
 
.heading { 
 
    padding-right: 10px; 
 
} 
 
.header { 
 
    float: left !important; 
 
    padding-right: 10px; 
 
} 
 
.donothideme { 
 
    float: right !important; 
 
    padding-right: 10px; 
 
    padding-top: 8px; 
 
} 
 
.hideme1 { 
 
    Border: solid 2px blue; 
 
    padding: 10px 5px 5px 10px; 
 
    clear: both; 
 
} 
 
.hideme2 { 
 
    Border: solid 2px green; 
 
    padding: 10px 5px 5px 10px; 
 
} 
 
.hideme3 { 
 
    Border: solid 2px yellow; 
 
    padding: 10px 5px 5px 10px; 
 
    color: #000; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="form-group"> 
 
    <div class="heading"> 
 
     <p></p> 
 
     <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
     </div> 
 
     <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
</div>

Der obige Code ist eine grobe Anleitung, was ich will die Geige zu erreichen, ist hier https://jsfiddle.net/gpLxaj8y/

Quelle

2016-03-22 ramakunga

Ihre Fiddle scheint alle drei Dokumente einzeln zu verstecken. Möchten Sie nur ein Set für jede Box ausblenden? – Elipzer

Sie haben noch einen Wrapper Element für jeden Satz von Elementen, eine Option besteht darin, jeden Satz von Elementen mit einem Wrapper zu umhüllen, dann closest() und find() zu verwenden.

Aber mit dem angegebenen Markup, was Sie tun müssen, um die nächsten Geschwisterelemente des aktuellen form-group Element so

jQuery(function($) { 
 
    $(".HideRow").click(function() { 
 
    $(this).closest('.form-group').nextUntil('.form-group', '.hideme1, .hideme2, .hideme3').toggle(!this.checked); 
 
    }); 
 
});

.form-group { 
 
    clear: both; 
 
} 
 
.heading { 
 
    padding-right: 10px; 
 
} 
 
.header { 
 
    float: left !important; 
 
    padding-right: 10px; 
 
} 
 
.donothideme { 
 
    float: right !important; 
 
    padding-right: 10px; 
 
    padding-top: 8px; 
 
} 
 
.hideme1 { 
 
    Border: solid 2px blue; 
 
    padding: 10px 5px 5px 10px; 
 
    clear: both; 
 
} 
 
.hideme2 { 
 
    Border: solid 2px green; 
 
    padding: 10px 5px 5px 10px; 
 
} 
 
.hideme3 { 
 
    Border: solid 2px yellow; 
 
    padding: 10px 5px 5px 10px; 
 
    color: #000; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="form-group"> 
 
    <div class="heading"> 
 
     <p></p> 
 
     <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
     </div> 
 
     <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="header"> 
 
     <h4>I do not want to hide</h4> 
 
    </div> 
 
    <div class="donothideme"> 
 
     <label for="NWDCheckbox" class="checkme">Check me...</label> 
 
     <input name="Boxy" id="Boxy" value="Yes" class="HideRow CheckBox" type="checkbox"> 
 
    </div> 
 
    </div> 
 
    <div class="hideme1"> 
 
    <p> 
 
     I want To be Hidden 
 
    </p> 
 
    </div> 
 
    <div class="hideme2"> 
 
    <p> 
 
     Me to 
 
    </p> 
 
    </div> 
 
    <div class="hideme3"> 
 
    <p> 
 
     What about Me 
 
    </p> 
 
    </div> 
 
</div>

Quelle

2016-03-22 03:23:10

Diese Lösung funktioniert, aber als Neuling bin ich ein wenig verwirrt, wie die ausgewählten divs tatsächlich versteckt sind, da es nirgends in der Codezeile, die eigentlich sagt, die divs verstecken ??? – ramakunga

@ramakunga Die [toggle] (http://api.jquery.com/toggle) Methode macht das, wenn 'true' übergeben wird, wird die Anzeige so eingestellt, dass das Element angezeigt wird, wenn' false' übergeben wird, dann wird es ausgeblendet –

Ihr Anwendungsfall ist sehr einfach zu wählen, die Sie benötigen um eine Klasse zu erstellen und an alle Divs anzuhängen. Weitere Verwendung bei Änderungsereignis toggeln diese Divs. Hier ist die jsfiddle es

CSS

.hidden { 
    display : block; 
}

Javascript

$('#chkbox').change(function(){ 
    $('.hidden').toggle(); 

});

Gesamten Arbeits Code hier https://jsfiddle.net/avinash8526/a362u5px/

Quelle

2016-03-22 04:32:08

eine Reihe von Divs aus Kontrollkästchen ausblenden auswählen

Antwort

Verwandte Themen