onay kutusundan bir boşluk kümesini gizle

'u seçtim Oluşturduğum karmaşık bir form var ancak belirli bir DIVS kümesini gizlemek için jQuery oluşturmaya çalışırken beynim soluyor. İstediğim şey, bu boşlukların onay kutusu işaretlendiğinde gizlenmesidir. i var en yakın buonay kutusundan bir boşluk kümesini gizle

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>

Yukarıdaki kod i keman burada https://jsfiddle.net/gpLxaj8y/

kaynak

2016-03-22 ramakunga

Kuklanız, üç ayrı dokümanı tek tek saklıyor gibi görünüyor. Her kutu için sadece bir set saklamak ister misiniz? – Elipzer

Bir sarmalayıcı yok olduğunu ulaşmak istediğimiz için kaba bir kılavuz olduğunu Öğelerin her kümesi için öğe, bir seçenek öğelerin her kümesini bir sarıcı ile sarmak ve sonra closest() ve find()'u kullanmaktır.

Fakat verilen biçimlendirme ile

, ne yapmak gerekir, böylece

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>

kaynak

2016-03-22 03:23:10

Bu çözüm işe yarıyor, ama acemi olarak ben aslında gerçekten de divleri gizlemek dediği kod satırında hiçbir yerde olduğu gibi seçilen divs aslında nasıl gizli olduğu konusunda biraz kafam karıştı ??? – ramakunga

@ramakunga [toggle] (http://api.jquery.com/toggle) yöntemi, eğer 'true' geçilirse,' false 'iletilirse öğeyi göstermek için ekranı ayarlar, sonra gizlenir –

kullanımınız durum çok basit, size gereken akım form-group elemanın sonraki kardeş elemanlarını seçmektir Bir sınıf oluşturmak ve onu tüm divlara eklemek. Daha fazla değişiklik olayı bu divleri değiştirir. İşte için jsfiddle olan bu

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

});

burada tam çalışma kodunu https://jsfiddle.net/avinash8526/a362u5px/

görün

CSS

.hidden { 
    display : block; 
}

JavaScript

kaynak

2016-03-22 04:32:08

onay kutusundan bir boşluk kümesini gizle

cevap

İlgili konular