Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 02.11.2016, 22:08
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

рони, вот корявенький живой пример для понимания моих запутанных мыслей, помогите мне их распутать)
<html>
<head>
  <title> </title>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')"  type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')"  type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')"  type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input  onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<table>
  <tr>
    <td>
      <div id="1" style="display: none">
        <li><label>Input1</label></li>
        <li><input class="i1" type="text" name="name" /></li>
    </div>
    </td>
    <td>
      <div id="2" style="display:none">
        <li><label>Input2</label></li>
        <li><input class="i2" type="text" name="name" /></li>
      </div>
    </td>
    <td>
      <div id="3" style="display: none">
        <li><label>Input3</label> </li>
        <li><input class="i3" type="text" name="name" /></li>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="4" style="display: none">
        <li><label>Input4</label></li>
        <li><input class="i4" type="text" name="name" /></li>
      </div>
    </td>
    <td>
      <div id="5" style="display: none">
        <li><label>Input5</label></li>
        <li><input class="i5" type="text" name="name" /></li>
      </div>
    </td>
    <td>
      <div id="6" style="display: none">
        <li><label>Input6</label></li>
        <li><input class="i6" type="text" name="name" /></li>
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  function show(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
      document.getElementById(id).style.display='block';
    }else{
      document.getElementById(id).style.display='none';
    }
  }
</script>
</body>
</html>

Вот пример, нажмите скажем чекбокс1 и любой чекбокс со следующей строки или чекбосы 3 и 4. Нужно чтобы вне зависимости от порядка в котором выбираешь чекбоксы (не обязательно 1-2-3, например 3-4-6) формы появлялись по порядку - сначала в первой строке, если после выбранного 3его чекбокса выбрать четвертый, то соответственно 4я форма должна появиться на следующей строчке.

Последний раз редактировалось AlexOk, 02.11.2016 в 22:28.
Ответить с цитированием
  #12 (permalink)  
Старый 02.11.2016, 22:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

AlexOk,
я пас
Ответить с цитированием
  #13 (permalink)  
Старый 02.11.2016, 22:47
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

рони, это хоть как-нибудь реализуемо?)) Куда копать?
Спасибо за участие)
Ответить с цитированием
  #14 (permalink)  
Старый 02.11.2016, 22:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

AlexOk,
реализуемо осталось только понять чего вы хотите, и li внутри div ... без переводчика сложновато ...
Ответить с цитированием
  #15 (permalink)  
Старый 02.11.2016, 22:59
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

Знаю
Просто хочу, чтоб вне зависимости от того какие чекбоксы выбраны
(3-5-6), формы привязанные к чекбоксу появлялись последовательно (построчно)
Ответить с цитированием
  #16 (permalink)  
Старый 03.11.2016, 00:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

AlexOk,
<html>
<head>
  <title> </title>
  <style type="text/css">
  .tab{

  width: 300px;
  }
  .tab > div{
  float: left;
  width: 100px;

  }
  .tab > div input{
   width: 100%;

  }
  </style>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')"  type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')"  type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')"  type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input  onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<div  class="tab" >

      <div id="1" style="display: none">
        <label>Input1</label>
        <input class="i1" type="text" name="name" />
    </div>

      <div id="2" style="display:none">
        <label>Input2</label>
        <input class="i2" type="text" name="name" />
      </div>

      <div id="3" style="display: none">
        <label>Input3</label>
        <input class="i3" type="text" name="name" />
      </div>

      <div id="4" style="display: none">
        <label>Input4</label>
        <input class="i4" type="text" name="name" />
      </div>

      <div id="5" style="display: none">
        <label>Input5</label>
        <input class="i5" type="text" name="name" />
      </div>

      <div id="6" style="display: none">
        <label>Input6</label>
        <input class="i6" type="text" name="name" />
      </div>

</div>

<script type="text/javascript">
  function show(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
      document.getElementById(id).style.display='block';
    }else{
      document.getElementById(id).style.display='none';
    }
  }
</script>
</body>
</html>
Ответить с цитированием
  #17 (permalink)  
Старый 03.11.2016, 00:15
Интересующийся
Отправить личное сообщение для AlexOk Посмотреть профиль Найти все сообщения от AlexOk
 
Регистрация: 02.11.2016
Сообщений: 20

Спасибо огромное! Представлял себе все несколько ужаснее...
Скачал книжек буду учить js, html, css. Спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое добавление элементов и scrollHeight Дыдыкин Сергей Элементы интерфейса 1 07.01.2016 05:00
Добавление нескольких колонок в таблицу nanoT1m Элементы интерфейса 3 08.06.2014 22:45
Добавление строк в таблицу ded711 Общие вопросы Javascript 1 30.03.2014 16:52
Динамическое создание матрицы div и присвоением значений элементам sonntagausgang Общие вопросы Javascript 5 07.12.2013 07:51
Создание и добавление checkbox в форму Анжелика Общие вопросы Javascript 4 23.02.2010 16:49