Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2018, 11:29
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Появление блока
Добрый день. Подскажите, как реализовать такое:
Есть форма с множеством чекбоксов по вертикали. Как организовать появление блока напротив того чекбокса, который активировали или деактивировали?
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2018, 12:07
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Отслуживать событие "change" и выводить нужный блок.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2018, 13:03
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2018, 12:23
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Большое спасибо. Но у меня 1 блок на все чекбоксы.
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2018, 12:25
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 403

Верстка типа такого:
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2018, 15:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

если 2 будут отмечены, как тогда поступать?
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2018, 15:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от j0hnik
если 2 будут отмечены,
event click
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2018, 15:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Янковиц,
может input:focus:after будет достаточно?
Ответить с цитированием
  #9 (permalink)  
Старый 20.01.2018, 15:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Янковиц,
<!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>
Ответить с цитированием
  #10 (permalink)  
Старый 20.01.2018, 16:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
Это очень сильное колдунство.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление блока. maxg5 jQuery 11 26.06.2017 23:12
Появление блока при скролле вверх dizent Общие вопросы Javascript 2 18.09.2015 06:16
Появление блока по наведению Batyabest Events/DOM/Window 4 01.07.2015 20:47
Появление блока когда курсор мыши опускается ниже окна браузера runyugin Элементы интерфейса 1 26.06.2015 08:34
Javascript : появление блока из под другого блока KingR Элементы интерфейса 3 12.05.2010 21:40