Появление блока
Добрый день. Подскажите, как реализовать такое:
Есть форма с множеством чекбоксов по вертикали. Как организовать появление блока напротив того чекбокса, который активировали или деактивировали? |
Отслуживать событие "change" и выводить нужный блок.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<input type="checkbox">
<div class="box">Чекбокс1</div>
<input type="checkbox">
<div class="box">Чекбокс2</div>
<input type="checkbox">
<div class="box">Чекбокс3</div>
<input type="checkbox">
<div class="box">Чекбокс4</div>
</body>
<style>
input:not(:checked) + div {
display: none
}
input::checked + div {
display: block
}
</style>
</html>
|
Большое спасибо. Но у меня 1 блок на все чекбоксы.
|
Верстка типа такого:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<form>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<div class="box">Блок с содержимым, изначально он скрыт</div>
</form>
</html>
|
если 2 будут отмечены, как тогда поступать?
|
Цитата:
|
Янковиц,
может input:focus:after будет достаточно? |
Янковиц,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style type="text/css">
input:focus:after {
content: "Блок с содержимым, изначально он скрыт"
}
</style>
</head>
<form>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</form>
</html>
|
рони,
Это очень сильное колдунство. |
Это часть формы на ajax. При активации/деактивации чекбоксов содержимое блока меняется. Форма у меня по высоте почти на весь экран, и хотелось бы, чтобы при активации чекбокса, блок появлялся возле последнего измененного элемента
|
Я предполагаю, что необходимо просто вычислить высоту от верха родительского блока до последнего измененного элемента формы. А дальше уже css?
Прошу помощи у формучан |
Сделал так:
$('#filter').on('change', 'input:', function(){
var pos = $(this).position();
$('.filter-result').css({ 'margin-top' : pos.top });
});
Обычные чекбоксы отрабатывает на ура. Однако, с input type="hidden" какая-то беда. Вместо положенных 100-200 пикселей, он оступает 3 тысячи. Попробовал убрать type=hidden. Заработало, как надо. Осталось решить, как скрыть этот инпут. Display: none не помогает |
Попробовал добавить стилей без display: none
opacity: 0;
height: 0;
padding: 0;
margin: 0;
border: 0;
Сработало. Но это костыль какой-то, а не решение :( |
| Часовой пояс GMT +3, время: 15:49. |