Зависимые чекбоксы

sergey_sergey · February 2, 2010

Вот есть два чекбокса:

Скажите, как сделать, чтобы при выборе первого, второй становился активным и если второй выбран, то после снятия галочки с первого, второй становился бы снова неактивным и ещё и невыбранным.

psywalker · February 13, 2010

Да не вопрос дружище, держи скорее.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Категории</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	label { display: block;}
	fieldset{ margin: 20px 10px;}
	input { margin-right: 5px;}

</style>

</head><body>

<form action="#" id="form">

	<fieldset id="category">
		<label><input type='checkbox' value='1' onclick="assortment(this);" >Продукты питания</label>
		<label><input type='checkbox' value='2' onclick="assortment(this);">Одежда</label>
		<label><input type='checkbox' value='3' onclick="assortment(this);">Бытовая техника</label>
	</fieldset>

	<fieldset id="byCategory">

		<label><input type='checkbox' value='4' onclick="assortment(this);">Молоко</label>
		<label><input type='checkbox' value='5' onclick="assortment(this);">Кефир</label>
		<label><input type='checkbox' value='6' onclick="assortment(this);">Сахар</label>

		<label><input type='checkbox' value='7' onclick="assortment(this);">Куртка</label>
		<label><input type='checkbox' value='8' onclick="assortment(this);">Шапка</label>
		<label><input type='checkbox' value='9' onclick="assortment(this);">Штаны</label>

		<label><input type='checkbox' value='10' onclick="assortment(this);" >Телевизор</label>
		<label><input type='checkbox' value='11' onclick="assortment(this);">Магнитофон</label>
		<label><input type='checkbox' value='12' onclick="assortment(this);">Плита</label>

	</fieldset>
</form>


<script type="text/javascript">

	function assortment(node){
		var check = node.value

		var category = document.getElementById('category')
		var inputCategory = category.getElementsByTagName('input')

		var byCategory = document.getElementById('byCategory')
		var inputByCategory = byCategory.getElementsByTagName('input')

		var product = [[4,5,6],[7,8,9],[10,11,12]]
	if(node.checked){
		if(check == 1){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[0][0]){
						inputByCategory.item(k).disabled=""

					}
					if(inputByCategory.item(k).value==product[0][1]){
						inputByCategory.item(k).disabled=""
					}
					if(inputByCategory.item(k).value==product[0][2]){
						inputByCategory.item(k).disabled=""
					}



				}
		}
		if(check == 2){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[1][0]){
						inputByCategory.item(k).disabled=""
					}
					if(inputByCategory.item(k).value==product[1][1]){
						inputByCategory.item(k).disabled=""
					}
					if(inputByCategory.item(k).value==product[1][2]){
						inputByCategory.item(k).disabled=""
					}
				}
		}
		if(check == 3){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[2][0]){
						inputByCategory.item(k).disabled=""
					}
					if(inputByCategory.item(k).value==product[2][1]){
						inputByCategory.item(k).disabled=""
					}
					if(inputByCategory.item(k).value==product[2][2]){
						inputByCategory.item(k).disabled=""
					}
				}
		}
	}else{

		if(check == 1){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[0][0]){
						inputByCategory.item(k).disabled="disabled"

					}
					if(inputByCategory.item(k).value==product[0][1]){
						inputByCategory.item(k).disabled="disabled"
					}
					if(inputByCategory.item(k).value==product[0][2]){
						inputByCategory.item(k).disabled="disabled"
					}
					for(var i = 0; i<inputByCategory.length; i++)inputByCategory.item(i).checked=false
				}

		}
		if(check == 2){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[1][0]){
						inputByCategory.item(k).disabled="disabled"
					}
					if(inputByCategory.item(k).value==product[1][1]){
						inputByCategory.item(k).disabled="disabled"
					}
					if(inputByCategory.item(k).value==product[1][2]){
						inputByCategory.item(k).disabled="disabled"
					}
					for(var i = 0; i<inputByCategory.length; i++)inputByCategory.item(i).checked=false
				}

		}
		if(check == 3){

				for(var k = 0; k<inputByCategory.length; k++){
					if(inputByCategory.item(k).value==product[2][0]){
						inputByCategory.item(k).disabled="disabled"
					}
					if(inputByCategory.item(k).value==product[2][1]){
						inputByCategory.item(k).disabled="disabled"
					}
					if(inputByCategory.item(k).value==product[2][2]){
						inputByCategory.item(k).disabled="disabled"
					}
					for(var i = 0; i<inputByCategory.length; i++)inputByCategory.item(i).checked=false
				}

		}
	}
	}

</script>

</body></html>

sergey_sergey · February 13, 2010

Bo! Теперь порядок! Я, правда, сразу не раздуплился, оказывается наличие галочки и параметра disabled совсем не означает, что переменная полетит, т.е достаточно disabled и не важно стоит галочка или нет :lol: . Спасибо! Небольшой косячок есть: сразу при старте страницы второстепенные чекбоксы все без disabled и стоит только включить-выключить главный, тогда всё работает как надо. Как бы так сделать, чтоб сразу все второстепенные были disabled?

Bo! Теперь порядок! Я, правда, сразу не раздуплился, оказывается наличие галочки и параметра disabled совсем не означает, что переменная полетит, т.е достаточно disabled и не важно стоит галочка или нет . Спасибо! Небольшой косячок есть: сразу при старте страницы второстепенные чекбоксы все без disabled и стоит только включить-выключить главный, тогда всё работает как надо. Как бы так сделать, чтоб сразу все второстепенные были disabled?

Всё, разобрался! Поставил всем второстепенным чекбоксам по умолчанию disabled="disabled". Теперь пашет как надо! Ещё раз спасибо за помощь!

psywalker · February 13, 2010

Всё, разобрался! Поставил всем второстепенным чекбоксам по умолчанию disabled="disabled". Теперь пашет как надо! Ещё раз спасибо за помощь!

Да ерунда, побольше давай задачек, мне тока за радость же :lol:

slavok47 · February 13, 2010

мне тока за радость же

Пока объяснил сам понял?))

psywalker · February 13, 2010

Пока объяснил сам понял?))

Понял что именно?

slavok47 · February 13, 2010

как это делается, говорил же что в JS не разбераешься))

psywalker · February 13, 2010

как это делается, говорил же что в JS не разбераешься))

На начальном уровне разбираюсь, не больше.

slavok47 · February 13, 2010

пойду еще дальше. Наверное создал искусственный интеллект, у которого на {else} прописано print "аа, ну я просто не вчитывался, предположил просто."
=)

:lol:

psywalker · February 13, 2010

Ну да, я давно работал над ним, и вот наконец... :lol:

Sign In

Зависимые чекбоксы

Question

sergey_sergey

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

sergey_sergey

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

slavok47

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

slavok47

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

slavok47

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information