Форум

Азат · #1 (**permalink**) 10.07.2012, 20:41

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

lord2kim · #2 (**permalink**) 10.07.2012, 21:05

Сообщение от Азат

Как сделать так чтобы при выборе 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@ · #3 (**permalink**) 10.07.2012, 21:39

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

lord2kim · #4 (**permalink**) 10.07.2012, 21:40

Сообщение от Dim@

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

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

Dim@ · #5 (**permalink**) 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@ · #6 (**permalink**) 10.07.2012, 21:54

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

bes · #7 (**permalink**) 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>

Азат · #8 (**permalink**) 13.07.2012, 10:33

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

Азат · #9 (**permalink**) 13.07.2012, 10:38

вот

bes · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript