Добрый день! Хотите скрыть/показать элементы с помощью атрибута checkboxes («checked», false/true). Поэтому я создал этот пример, чтобы объяснить, что я хочу. https://jsfiddle.net/9LzLm9hx/4/ Установите флажок и снимите флажок категории, а затем нажмите кнопку hide/show
. Когда этот флажок равен false
, он скрывается, но после этого я не могу сделать их true
. Благодарю.Скрыть и показать элементы с помощью флажка
0
A
ответ
2
вы можете использовать тот же id
и class
имя в ваших элементов, и вы можете подвести его к следующему:
$('.js-ok').on('click', function() {
//iterate through checkboxes
$(".custom-checkbox :checkbox").each(function() {
//toggle specific element according to the checkbox status
$("." + $(this).attr("id")).toggle($(this).prop("checked"));
})
});
#common {
margin-left: 20px;
}
#common + label + span {
font-size: 21px;
color: red;
}
.col-xs-3 {
margin-top: 29px;
border: 1px solid black;
}
.category {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="modal-body row col-xs-12">
<div class="col-xs-8 common-inputs">
<form role="form" class="left-checkbox-container col-xs-12">
<div class="custom-checkbox checkbox-title">
<input type="checkbox" id="common" />
<label for="common"></label> <span>Common</span>
</div>
</form>
<form role="form" class="left-checkbox-container col-xs-5">
<div class="custom-checkbox">
<input type="checkbox" id="post-id" />
<label for="post-id"></label> <span>ID</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="active" name="check" />
<label for="activation"></label> <span>Active</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="info" name="check" />
<label for="information"></label> <span>info</span>
</div>
</form>
<form role="form" class="left-checkbox-container col-xs-5">
<div class="custom-checkbox">
<input type="checkbox" id="onOff" />
<label for="on-off"></label> <span>on/off</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="socialNet" name="check" />
<label for="social-network"></label> <span>social</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="category" name="check" />
<label for="category"></label> <span>category</span>
</div>
</form>
<button class='btn btn-primary js-ok'>hide/show category</button>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class='col-xs-3 post-id'>id</div>
<div class='col-xs-3 active'>active</div>
<div class='col-xs-3 info'>info</div>
<div class='col-xs-3 onOff'>on/off</div>
<div class='col-xs-3 socialNet'>social</div>
<div class='col-xs-3 category'>category</div>
</div>
</div>
</div>
Ссылки
0
.attr("checked", false)
является присвоение ложным к элементу, и возвращает его, что имеет значение истина (существует), вы хотите сравнить атрибут, для этого вы можете:
$('#category').attr("checked") === false
.
0
Если вы хотите проверить, если галочку или нет, используйте этот код $('#category').is(':checked')
, этот код $('#category').attr("checked", false)
набор флажок атра ложь, но возвращает истинный, так что ваш текущий код просто всегда убрав #category флажка и скрытие .category элемент
Смежные вопросы
- 1. Показать и скрыть элементы с помощью JQuery
- 2. VBA, чтобы скрыть и показать строки с помощью флажка activex
- 3. показать DIV и скрыть другой DIV с помощью флажка
- 4. показать/скрыть элементы динамически с помощью нокаута
- 5. Скрыть/показать элементы с javascript
- 6. Динамически показать и скрыть элементы
- 7. Фильтр флажка, чтобы показать/скрыть элементы, украшенные несколькими атрибутами data- *
- 8. Скрыть/Показать элементы с JQuery
- 9. Фонд: с помощью флажка, чтобы скрыть/показать div
- 10. Показать/скрыть элементы jQuery
- 11. Скрыть/Показать связанные элементы
- 12. Использовать TinyInt, чтобы скрыть/показать элементы управления?
- 13. Как показать и скрыть div с элементом флажка в Angular2?
- 14. Как показать и скрыть элемент с статусом флажка в Angularjs
- 15. CSS показать/скрыть следующие элементы
- 16. Как скрыть и показать Javascript и CSS с помощью флажка в Internet Explorer
- 17. Показать и скрыть элементы нг-повтора цикла
- 18. Состояние флажка должно показать или скрыть div
- 19. Показать и скрыть различные элементы на фокусе
- 20. Показать/скрыть поле для проверки флажка
- 21. Javascript Флажка переключатель ДИВ скрыть показать
- 22. Скрыть и показать элементы в jQuery
- 23. показать и скрыть элементы при нажатии
- 24. Google Chrome браузер - показать и скрыть элементы
- 25. Скрыть и показать элементы управления на состоянии
- 26. показать и скрыть элементы списка в последовательности
- 27. Показать и скрыть элементы в Угловом
- 28. Скрыть и Показать элементы панели действия исчезли
- 29. Показать и скрыть элементы по атрибуту данных
- 30. показать/скрыть вкладки на основе выбора флажка
проверить обновленный скрипку [здесь] (https://jsfiddle.net/9LzLm9hx/6/) – Akshay
не работает так же, как предыдущий – Dilip