Форум

iilexii · #1 (**permalink**) 18.04.2014, 14:46

Есть 2 чекбокса, необходимо, чтобы при выборе 1 не происходило ничего, а при выборе 2 появлялись поля типа text.
Есть несколько условий, в которых собственно и проблема:

нужно, чтобы выбирался только один из чекбоксов(~~решено~~);
чтобы при выборе обратно 1 доп. поля исчезали.

Вот мои наработки:

<th class="lable">*Анонимное письмо:</th>
                        <td>
<div>
  <input type="checkbox" name="anonim_da" value="Да" checked/>Да<br />
  <input name="anonim_net" value="Нет" type = 'checkbox' id = 'cb1' onchange = 'showOrHide("cb1", "cat1");'/>Нет
  <br />
  <div id = 'cat1' style = 'display: none;'>
    *Ф.И.О.:<br /><input name="fio" size="40" type="text"><br />
  <div id = 'cat1' style = 'display: block;'>
    Организация:<br /><input name="org" size="40" type="text"><br />
    Должность:<br /><input name="dolz" size="40" type="text"><br />
    *Адрес:<br /><input name="addr" size="40" type="text"><br />
  </div></div></div></div>
      <script type="text/javascript">
        var handler = function ( event ){
          event = event || window.event;
          var target = event.target || event.srcElement;
          if ( target.nodeType == 1 && target.nodeName.toLowerCase() == "input" && target.type == "checkbox" && target.checked ) {
            var inputs = document.getElementsByTagName("input");
            for ( var i = 0; inputs[i]; i++ ) {
              if ( inputs[i].type == "checkbox" && inputs[i] != target ) {
                inputs[i].checked = false;
              }
            }
          }
        }
        if (document.addEventListener){
          document.addEventListener('click', handler, false);
        } else if (document.attachEvent){
          document.attachEvent('onclick', handler);
        }
    </script>
<script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

Прошу не судить строго, стараюсь изучать язык, но времени пока на это мало, поэтому пользуюсь готовыми скриптами.

ksa · #2 (**permalink**) 18.04.2014, 14:58

Сообщение от iilexii

Есть 2 чекбокса, необходимо, чтобы при выборе 1 не происходило ничего, а при выборе 2 появлялись поля типа text.
Есть несколько условий, в которых собственно и проблема:
-нужно, чтобы выбирался только один из чекбоксов(решено);
-чтобы при выборе обратно 1 доп. поля исчезали.

Это обычно делают радиокнопками...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#box {
	display: none;
}
</style>
<script type='text/javascript'>
function test(On) {
	document.getElementById('box').style.display=(On)? 'block': 'none';
};
</script>
</head>
<body>
<input type='radio' name='test' onclick='test()' checked />
<br />
<input type='radio' name='test' onclick='test(true)' />
<div id='box'>
	<p>Text</p>
</div>
</body>
</html>

iilexii · #3 (**permalink**) 18.04.2014, 16:13

Проблема в том, что у меня name "" передается обработку и мне нужны разные значения, чего я в радио сделать не могу, т.к. если в радио разные значение name, то будут выбраны оба радио.

devote · #4 (**permalink**) 18.04.2014, 16:27

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box {
    display: none;
}
</style>
<script type="text/javascript">
function test(self, On) {
    document.getElementsByName(On ? 'anonim_da' : 'anonim_net')[0].checked = false;
    document.getElementById('box').style.display=(self.checked && On)? 'block': 'none';
};
</script>
</head>
<body>
<input type="checkbox" name="anonim_da" onclick="test(this)" checked />
<br />
<input type="checkbox" name="anonim_net" onclick="test(this, true)" />
<div id="box">
    <p>Text</p>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript