Появление блока
Добрый день. Подскажите, как реализовать такое:
Есть форма с множеством чекбоксов по вертикали. Как организовать появление блока напротив того чекбокса, который активировали или деактивировали? |
Отслуживать событие "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>
|
рони,
Это очень сильное колдунство. |
| Часовой пояс GMT +3, время: 17:58. |