Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   на странице checkbox'ы при активации их и нажатии "ОК" должны появится поля ввода (https://javascript.ru/forum/dom-window/29776-na-stranice-checkbox%27y-pri-aktivacii-ikh-i-nazhatii-ok-dolzhny-poyavitsya-polya-vvoda.html)

Азат 10.07.2012 20:41

на странице checkbox'ы при активации их и нажатии "ОК" должны появится поля ввода
 
Как сделать так чтобы при выборе checkbox'а и нажатии "Ок" потом появлялись поля ввода текста?

lord2kim 10.07.2012 21:05

Цитата:

Сообщение от Азат (Сообщение 187853)
Как сделать так чтобы при выборе checkbox'а и нажатии "Ок" потом появлялись поля ввода текста?

<html>
<head>
<title></title>
<script type="text/javascript">
function ch() {
	var chb = document.getElementById("chbx").checked;
	if (chb == true) {
		document.getElementById("div").innerHTML += "<input type='text'>";
	}
}
</script>
</head>
<body>
<input type="checkbox" id="chbx">Создать текстовые поля?<br><input type="button" onClick="ch()" value="Создать">
<div id="div"><input type="text"></div>
</body>
</html>

Dim@ 10.07.2012 21:39

lord2kim,
что бы делать примеры с кнопкой запустить надо [html run] или [js run]

lord2kim 10.07.2012 21:40

Цитата:

Сообщение от Dim@ (Сообщение 187872)
lord2kim,
что бы делать примеры с кнопкой запустить надо [html run] или [js run]

я в курсе...просто побырому набрасал пример того, что хочет реализовать ТС

Dim@ 10.07.2012 21:52

<script>
function cb(arg, th){
 check = th.checked;
 if (check == true){
  document.form.elements[arg].style.display = 'block';
 }
 else{
  document.form.elements[arg].style.display = 'none';
 }
}
</script>
<input type="checkbox" onclick='cb(0, this)'>Открыть первое поле?<br />
<input type="checkbox" onclick='cb(1, this)'>Открыть второе поле?<br />
<input type="checkbox" onclick='cb(2, this)'>Открыть третье поле?<br />
<input type="checkbox" onclick='cb(3, this)'>Открыть четвертое поле?<br />
<form name='form'>
<input type='text' style='display:none'><br />
<input type='text' style='display:none'><br />
<input type='text' style='display:none'><br />
<input type='text' style='display:none'><br />
</form>

Dim@ 10.07.2012 21:54

lord2kim,
я думаю зачем нужны просто поля (если только к примеру для отправки мыла, но тогда просто input-ы не нужны)

bes 11.07.2012 19:34

<form id="form">
  <input type="checkbox"><br>
  <input type="checkbox"><br>
  <input type="checkbox"><br>
  <input type="checkbox"><br>
</form>

<script>
window.onload = function () {
  var form = document.getElementById('form');

  form.onclick = function (e)  {
    e = e || event;
    var target = e.target || e.srcElement;
    if (target.type == 'checkbox') {
      var next = target.nextSibling;
      if (next && next.tagName == 'INPUT') {
        if (next.style.display == 'inline') {
          next.style.display = 'none';
        } else {
          next.style.display = 'inline';
        }
      } else {
        var inp = document.createElement('input');
        inp.style.display = 'inline';
        this.insertBefore(inp, next);
      }
    }
  }

}
</script>

Азат 13.07.2012 10:33


вот такая страница, при нажатии на "Добавить критерии поиска" появляется список "По названию" "По автору" "По ключевым полям", выбираем нужное нажимаем "ок", появляются input'ы - это я сделал. Но как сделать чтобы при нажатии на крестик только это поле одно очищалось а не исчезали все поля?

Азат 13.07.2012 10:38

Вложений: 1
вот

bes 13.07.2012 10:51

<form id="form">
  <input type="checkbox"><br>
  <input type="checkbox"><br>
  <input type="checkbox"><br>
  <input type="checkbox"><br>
</form>

<script>
window.onload = function () {
  var form = document.getElementById('form');

  form.onclick = function (e)  {
    e = e || event;
    var target = e.target || e.srcElement;
    if (target.type == 'checkbox') {
      var next = target.nextSibling;
      if (next && next.tagName == 'DIV') {
        if (next.style.display == 'inline') {
          next.style.display = 'none';
        } else {
          next.style.display = 'inline';
        }
      } else {
        var div = document.createElement('div');  
        div.style.display = 'inline';
        div.innerHTML = '<input><span style="cursor: pointer" onclick="this.previousSibling.value=\'\'">&nbspx</span>';
        this.insertBefore(div, next);
      }
    }
  }

}
</script>


Часовой пояс GMT +3, время: 14:32.