Форум

Amateur · #1 (**permalink**) 19.06.2011, 13:23

Здравствуйте. На странице стоит несколько checkbox. Как сделать так, чтобы пользователь мог выбрать только одно значение(мог поставить только 1 галочку), а если он выбрал 1 checkbox на других бы галочки убирались (checkbox около 100)

nikita.mmf · #2 (**permalink**) 19.06.2011, 16:29

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 != target ) {
        inputs[i].checked = false;
      }
    }
  }
}
if (document.body.addEventListener){
  document.body.addEventListener('click', handler, false); 
} else if (document.body.attachEvent){
  document.body.attachEvent('onclick', handler);
}

Amateur · #3 (**permalink**) 19.06.2011, 22:00

скажите а как использовать?
я вставил этот скрипт между <script></script>,
но галки все равно ставятся

nikita.mmf · #4 (**permalink**) 19.06.2011, 22:51

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<ol>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
		<li><input type="checkbox" name="" id=""/></li>
	</ol>
	<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>
</body>
</html>

Amateur · #5 (**permalink**) 19.06.2011, 22:59

спасибо. изините за нескромность, но последний вопрос:

к примеру есть несколько chexbo:

chexbox0
chexbox1
chexbox2
chexbox3
.....
chexboxN
как сделать так, чтобы при нажатии на chexbox0 с остальных chexbox галочка снималась, а при нажатии на любой другой, снималась галочка с chexbox0 ?

ksa · #6 (**permalink**) 20.06.2011, 09:20

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

к примеру есть несколько chexbo

Сделай нормальный тестовый пример. И покажи что сам уже пытался сделать...

Amateur · #7 (**permalink**) 21.06.2011, 11:31

<div>
 <input id="chexbox0" type="checkbox" onClick="selCheckbox(this);"/>
 <input id="chexbox1" type="checkbox" onClick="selCheckbox(this);"/>
 <input id="chexbox2" type="checkbox" onClick="selCheckbox(this);"/>
 <input id="chexbox3" type="checkbox" onClick="selCheckbox(this);"/>
</div>
 <script>
function selCheckbox(obj)
{
    var parent = obj.parentNode;
    if (obj.id != 'chexbox0')
        parent.getElementById('checkbox0').checked = false;
    else
    {
        var checks = parent.getElementsByTagName('input');
        for(var i in checks)
        {
            if (checks[i].id != obj.id)
                checks[i].checked = false;
        }
    }
}
 </script>

но данный скрипт позволяет выбирать все значения, а мне нужно, чтобы при выборе любого другого chexbox, кроме chexbox0, с chexbox0 убиралась галочка (checked = false).

Но как это сделать?

ksa · #8 (**permalink**) 21.06.2011, 12:53

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

Но как это сделать?

Проверять первый это чекбокс или нет...

Amateur · #9 (**permalink**) 21.06.2011, 13:03

это любому понятно. но я спрашиваю не потому, что не знаю алгоритма, а потому, что непонятен процесс реализации(((

ksa · #10 (**permalink**) 21.06.2011, 13:19

Amateur, это букварская задачка. Её дают сааамым новичкам при изучении языка и ДОМ-модели... Что именно в ней может быть не понятно?
Как работать с элементами и всё нужное из js есть в твоём же примере.

Форум

Справочник

Discord чат

Курсы javascript