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

sergey_sergey · February 2, 2010

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

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

psywalker · February 2, 2010

Чёто ты запутал совсем.

1) Смотри, допустим нажат первый, второй отжат, так?

2) Врубаем второй, первый отжимается?

sergey_sergey · February 2, 2010

Чёто ты запутал совсем.
1) Смотри, допустим нажат первый, второй отжат, так?
2) Врубаем второй, первый отжимается?

Нет, первый не отжимается.

Вот мой код:

<!--

function editText() {

var chkInput = document.getElementById('FlagEdit');

var txtInput = document.getElementById('IDD');

txtInput.disabled = 1 - chkInput.checked;

}

// -->

</script>

<table>

<tr>

...

</tr>

</table>

</form>

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

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

Нужно не допустить, чтобы в базу полетели подтемы без темы.

psywalker · February 3, 2010

Ааа, кажется понял, т.е. Если первый нажат, то и другие активны, а если он Отжат, то и другие становятся Неактивными?

Der neue Gesandte · February 3, 2010

...

Edited February 3, 2010 by Der neue Gesandte

rus · February 3, 2010

<script type='text/javascript'>
function check(self)
{
	var a = document.getElementsByTagName('input');
	var checkValue = self.checked;
	for (i=1; i<a.length; i++) {
		if (a[i].type=='checkbox')
			a[i].checked = checkValue;
	}
}
</script>

<div class="chek_all"><input type="checkbox" name="all_id" id="chkAll" onclick="check(this)"><label>Отметить всё / снять отметку</label></div>
<div class="div_input">
<input name="id" type="checkbox" ><label>Тут остальные чекбоксы</label>
<input name="id" type="checkbox" ><label>Тут остальные чекбоксы</label>
<input name="id" type="checkbox" ><label>Тут остальные чекбоксы</label>
<input name="id" type="checkbox" ><label>Тут остальные чекбоксы</label>
</div>

Edited February 3, 2010 by rus

psywalker · February 3, 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;}



</style>

</head>
<body>

<form action="#" id="form">
	<input value="1" onclick="test(this)" type="checkbox"> Test1
	<input value="2" onclick="test(this)" type="checkbox"> Test2
	<input value="3" onclick="test(this)" type="checkbox"> Test3
	<input value="4" onclick="test(this)" type="checkbox"> Test4
	<input value="5" onclick="test(this)" type="checkbox"> Test5
	<input value="6" onclick="test(this)" type="checkbox"> Test6
	<input value="7" onclick="test(this)" type="checkbox"> Test7
	<input value="8" onclick="test(this)" type="checkbox"> Test8
	<input value="9" onclick="test(this)" type="checkbox"> Test9
	<input value="10" onclick="test(this)" type="checkbox"> Test10
	<input value="11" onclick="test(this)" type="checkbox"> Test11
	<input value="12" onclick="test(this)" type="checkbox"> Test12
	<input value="13" onclick="test(this)" type="checkbox"> Test13
	<input value="14" onclick="test(this)" type="checkbox"> Test14
	<input value="15" onclick="test(this)" type="checkbox"> Test15

</form>
<div id="div">g</div>
<script type="text/javascript">
	var form = document.getElementById('form')
	var input = form.getElementsByTagName('input')

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

		if(check==1){
			if(input.item(0).checked==true){
				for(var i = 0; i<input.length;i++){
					if(input.item!=(0)){
						input.item(i).checked=true
					}
				}
			}else{
				for(var i = 0; i<input.length;i++){
					if(input.item!=(0)){
						input.item(i).checked=false
					}
				}			
			}
		}

		if(check!=1){
			var div = document.getElementById('div')
			div.style.background = 'red'
		}
	}
</script>

</body>
</html>

mishka · February 3, 2010

Сори за оффтоп.

Я ксожалению джс знаю очень поверхностно, скажем имею поверхностное представление...

Но мне кажется ТС немного некорректно обьяснил задачу

Я думаю что он не хочет одним кликом ставить галочки на все чекбоксы, а просто убрать параметр "disabled" тем самым делая возможным выбрать нучный чекбокс.

А если снять галочку с первого чекбокса, то и все остальные становятся неактивными + появляется параметр disabled

psywalker · February 3, 2010

Сори за оффтоп.
Я ксожалению джс знаю очень поверхностно, скажем имею поверхностное представление...
Но мне кажется ТС немного некорректно обьяснил задачу
Я думаю что он не хочет одним кликом ставить галочки на все чекбоксы, а просто убрать параметр "disabled" тем самым делая возможным выбрать нучный чекбокс.
А если снять галочку с первого чекбокса, то и все остальные становятся неактивными + появляется параметр disabled

А disabled - это что, атрибут? Его можно как нить подставить, как атрибут например?

rus · February 3, 2010

А disabled - это что, атрибут? Его можно как нить подставить, как атрибут например?

Читай.

mishka · February 3, 2010

в XHTML правильно писать disabled="disabled"

также как и checked="checked"

Edited February 3, 2010 by mishka2

rus · February 3, 2010

Сори за оффтоп.
Я ксожалению джс знаю очень поверхностно, скажем имею поверхностное представление...
Но мне кажется ТС немного некорректно обьяснил задачу
Я думаю что он не хочет одним кликом ставить галочки на все чекбоксы, а просто убрать параметр "disabled" тем самым делая возможным выбрать нучный чекбокс.
А если снять галочку с первого чекбокса, то и все остальные становятся неактивными + появляется параметр disabled

И вовсе не оффтоп, все верно, ТС именно это и имел ввиду, но даже если при таком раскладе:

Нужно не допустить, чтобы в базу полетели подтемы без темы.

то данные все-равно не полетят в бд если нет галочки на чекбоксе.

mishka · February 3, 2010

да уж, чтото непонятно чего хочет ТС

sergey_sergey · February 3, 2010

Ааа, кажется понял, т.е. Если первый нажат, то и другие активны, а если он Отжат, то и другие становятся Неактивными?

Да, правильно.

Сори за оффтоп.
Я ксожалению джс знаю очень поверхностно, скажем имею поверхностное представление...
Но мне кажется ТС немного некорректно обьяснил задачу
Я думаю что он не хочет одним кликом ставить галочки на все чекбоксы, а просто убрать параметр "disabled" тем самым делая возможным выбрать нучный чекбокс.
А если снять галочку с первого чекбокса, то и все остальные становятся неактивными + появляется параметр disabled

Вот, наконец-то! И ещё, если при активных "остальных" какой-то (или все) был быбран, то они становятся не checked (при снятии галочки с первого - основного).

psywalker · February 3, 2010

Ну если так, то тада я предлагаю Сетартибутом воспользоваться и поставить disabled="disabled" тому, кому нужно. В общем думаю ТС уже навели на правильный путь, а дальше он сам доделает.

sergey_sergey · February 3, 2010

И вовсе не оффтоп, все верно, ТС именно это и имел ввиду, но даже если при таком раскладе:
то данные все-равно не полетят в бд если нет галочки на чекбоксе.

Пользователь может тыцнуть на чекбокс подтемы при этом не нажав на тему и тогда в базу полетит подтема и получится непонятка, что за фраза, а надо всё сделать корректно, т.е. подтему выбирать только при нажатой теме.

psywalker · February 3, 2010

Пользователь может тыцнуть на чекбокс подтемы при этом не нажав на тему и тогда в базу полетит подтема и получится непонятка, что за фраза, а надо всё сделать корректно, т.е. подтему выбирать только при нажатой теме.

Ну ты разберёшься сам-то?

sergey_sergey · February 3, 2010

Ну ты разберёшься сам-то?

Не, точно, яваскрипт вообще не знаю.

psywalker · February 4, 2010

Не, точно, яваскрипт вообще не знаю.

Давай тада подитожем задание, я попробую ради интереса забацать.

1) У нас есть 10 чекбоксов

2) При Нажатии на Первый(он главный), у других пропадает параметр disabled="disabled" и это означает, что они могут нажиматься, каждый когда нам угодно и каждый делать разные операции?

3) При Отжатии первого чекбокса все остальные получают параметр disabled="disabled" и следовательно НЕ могут использоваться при нажатии?

4) Что ещё?

sergey_sergey · February 4, 2010

Давай тада подитожем задание, я попробую ради интереса забацать.
1) У нас есть 10 чекбоксов
2) При Нажатии на Первый(он главный), у других пропадает параметр disabled="disabled" и это означает, что они могут нажиматься, каждый когда нам угодно и каждый делать разные операции?
3) При Отжатии первого чекбокса все остальные получают параметр disabled="disabled" и следовательно НЕ могут использоваться при нажатии?
4) Что ещё?

Ещё они должны сбрасываться если были нажаты (НЕ checked) при пункте 3

psywalker · February 5, 2010

Ещё они должны сбрасываться если были нажаты (НЕ checked) при пункте 3

Т.е. если при Отжатии 3 пункта, а именно галочки в чекбоксе все остальные также должны сбрасывать параметр disabled="disabled", и как бы быть без него? В общем тоже самое, как при пункте 3 ?

rus · February 5, 2010

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function setDisabledAfter(checkbox) {
	var fields = checkbox.form.elements;
	for (var i=0; i<fields.length; i++) {
	   if (fields[i] != checkbox) {
		  fields[i].disabled = checkbox.checked;
	   }
	}
}
</script>
</head>
<body>
<form action="" method="post">
<p>Главный чекбокс
<input type="checkbox" onclick="setDisabledAfter(this)"></p>
<p><input type="checkbox"/></p>
<p><input type="checkbox"/></p>
</form>
</body>
</html>

ТС, дальше сам доработаешь?

sergey_sergey · February 6, 2010

Т.е. если при Отжатии 3 пункта, а именно галочки в чекбоксе все остальные также должны сбрасывать параметр disabled="disabled", и как бы быть без него? В общем тоже самое, как при пункте 3 ?

Нет, они должны быть disabled, только должны быть без галочек.

Попытаюсь ещё раз объяснить.

Есть категории товаров:

1. Продукты питания.

2. Одежда.

3. Бытовая техника.

Каждой из них соответствует "главный" checkbox.

Имеют такие значения: <input name='cat1' type='checkbox' value='Продукты питания'>Продукты питания.

В каждой категории имеются подкатегории: молоко, фрукты, овощи, крупы - это для первой.

Каждой также соответствует свой чекбокс: <input name='cat2' type='checkbox' value='Молоко'>Молоко.

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

Если точка клиента торгует бытовой техникой, то он нажимает чекбокс "Бытовая техника" и чекбоксы подкатегорий (телевизоры, магнитофоны и т.д.) становятся активными. Теперь он конкретизирует ассортимент - ставит галочку, например, "телевизоры", "розница". Всё, в базу этого клиента улетело "Бытовая техника", "Телевизоры", "Розница". Это удобно при выводе - напротив этого клиента будет стоять: Бытовая техника-телевизоры-розница. Всё ясно и понятно.

Теперь, (ну мало ли) если клиент нажал "Бытовая техника" и потом "Розница", а потом по какой-либо причине отжал "Бытовая техника", то в базу полетит просто "Розница" и при выводе будет непонятно, что за такая розница.

Задача: ни одна подкатегория не должна попасть в базу без категории. Т.е., если клиент после выбора категории и подкатегории решил отменить категорию, то и подкатегория автоматом бы отменялась. Чекбоксы подкатегорий снова должны остаться чистыми и недоступными (disabled).

Такая, блин, арифметика .

mishka · February 7, 2010

наверное всех сбило с толку слово "активный".

ТС имеет ввиду "активный" это не выбранный, это просто чекбокс который можна выбрать. Так как изначально его нельзя выбрать у него есть свойство disabled.

psywalker · February 12, 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"
					}
				}

		}
		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"
					}
				}

		}
		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"
					}
				}

		}
	}
	}

</script>

</body></html>

sergey_sergey · February 13, 2010

Спасибо за внимание и помощь, но не так. Ладно, поковыряюсь, может сам допру как подправить.

При снятии галочки с главного чекбокса, галочки с второстепенных не убираются, а надо чтоб убирались.

Спасибо ещё раз.

Sign In

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

Question

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information