У меня есть кнопка флажка, которая переключает на.active <div class="btn thisBtn active">
:
<div class="btn-group" data-toggle="buttons">
<label class="btn thisBtn">
<input type="checkbox"> This
</label>
<label class="btn thatBtn">
<input type="checkbox"> That
</label>
</div>
И я бы хотел, чтобы это активное состояние <div class="thisDiv hidden">
включение класса на <div class="thisDiv hidden">
$( function() {
if ( $( ".thisBtn" ).is( ".active" ) ) {
$( ".thisDiv" ).removeClass( "hidden" );
$( ".thisDiv" ).addClass( "show" );
} else {
$( ".thisDiv" ).removeClass( "show" );
$( ".thisDiv" ).addClass( "hidden" );
}
});
Вы можете изменить свой фрагмент, чтобы прослушать изменения флажка вместо удаления/добавления классов для выполнения меньших операций jQuery.
$("#checkbox").change(function() {
$("#checkbox-show").toggle();
});
Разметка HTML будет примерно такой:
<div class="btn-group" data-toggle="buttons">
<label class="btn thisBtn">
<input type="checkbox" id="checkbox"> This
</label>
<label class="btn thatBtn">
<input type="checkbox"> That
</label>
</div>
<div id="checkbox-show" style="display:none;">On checkbox select</div>
Если вы показываете форму с помощью механизма шаблонов, вы можете установить # checkbox-show для отображения: блок при загрузке, только если отмечен #checkbox. Если нет, просто выполните простой оператор if, чтобы показать/скрыть div с помощью jQuery только один раз, на готовом документе.
I have a radio button
, где это? Все, что я вижу, это флажок.active
. Что является своего рода проблемой, поскольку именно здесь вы хотите это сделать.