Форум

Игося · #1 (**permalink**) 17.12.2012, 17:52

Здравствуйте.

Есть следующий код:

<html>
<head>
<script type="text/javascript">
function EnableDisable(x)
{
	var a = x.id; // Получаем id выбранного элемента
	y = parseInt(a) % 10; // Узнаем последнюю цифру id выбранного элемента
	if (y == 1) // Определяем, какие id у отсавщихся элементов в строке
	{
		var b = parseInt(a)+1;
		var c = parseInt(a)+2;
	}
	if (y == 2) // в зависимости от последней цифры
	{
		var b = parseInt(a)+1;
		var c = parseInt(a)-1;
	}
	if (y == 3) // выбранного элемента
	{
		var b = parseInt(a)-2;
		var c = parseInt(a)-1;
	}
	if (document.getElementById(a).checked == true) // Делаем disabled другие элементы строчки
	{
		document.getElementById(b).disabled = true;
		document.getElementById(c).disabled = true;
	}
	if (document.getElementById(a).checked == false) // или снимаем с них disabled 
	{
		document.getElementById(b).disabled = false;
		document.getElementById(c).disabled = false;
	}
}
</script>
</head>
<body>
1 
<input type=checkbox name=1 id=1231 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=1232 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=1233 onclick='EnableDisable(this);'>
<br>
2 
<input type=checkbox name=1 id=4561 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=4562 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=4563 onclick='EnableDisable(this);'>
<br>
3 
<input type=checkbox name=1 id=7891 onclick='EnableDisable(this);'>
<input type=checkbox name=2 id=7892 onclick='EnableDisable(this);'>
<input type=checkbox name=3 id=7893 onclick='EnableDisable(this);'>
</body>
<html>

Суть - из MySQL в html-форму вытягиваются записи с уникальными id. Напротив каждой записи делается три (пять, десять) чекбоксов. Каждый столбик чекбоксов получает уникальный номер. Каждый чекбокс искуственно получает уникальный id в виде "id из базы + номер столбика чекбоксов". При выборе одного из чекбоксов в строке остальные становятся не активными, при снятии выбора они активируются.
Написанная выше функция все это делает.

Мне нужно, чтобы в каждом столбике пользователь мог выбрать только одну галочку - оптимально вместо чекбокса поставить группы радиокнопок (по столбикам name=1, name=2, name=3).

Теперь вопрос. Если эту функцию приклеить к радиокнопке, то как получить id кнопки, которая будет терять атрибут checked, при клике на другой переключатель с того-же столбика? Я не могу додуматься (ввиду слабых познаний javascript) и поэтому не могу вернуть переключатели в активное состояние. Прошу не копировать весь код моей формы, а только подсказать алгоритм получения id.

Буду благодарен за помощь.

lord2kim · #2 (**permalink**) 17.12.2012, 18:01

Игося, по клику на radio-переключатель N-ного столбца записывать в соответствующую переменную/массив № переключателя в столбце...
id элементов нужно начинать с латинской буквы, иначе в старых браузерах робить не будет
да и name нормальный не помешало бы вам поставить

Игося · #3 (**permalink**) 17.12.2012, 19:43

Спасибо lord2kim-у за помощь.

Переработанное решение выглядит так:

<html>
<head>
<script type="text/javascript">
function EnableDisable(x)
{
	var a = x.id; // Получаем id выбранного элемента
	var name = x.name; // Получаем name выбранного элемента 
	var elems = document.getElementsByName(x.name); // Записываем все элементы с таким именем в список
	for (var i=0; i<elems.length; i++) // и прогоняем через цикл
	{
		var input = elems[i]; // Объявляем транзитную переменную дабы цикл не глючил
		var k = input.value; // Получаем значение каждого элемента с заявленным name
		z = parseInt(k) % 10; // Узнаем последнюю цифру каждого элемента
		if (z == 1) // Определяем, какие id у оставшихся элементов в строке
		{
			var l = parseInt(k)+1;
			var m = parseInt(k)+2;
		}
		if (z == 2) // в зависимости от последней цифры
		{
			var l = parseInt(k)+1;
			var m = parseInt(k)-1;
		}
		if (z == 3) // выбранного элемента
		{
			var l = parseInt(k)-2;
			var m = parseInt(k)-1;
		}
		if (document.getElementById(k).checked == false && // Cнимаем disabled с других элементов
			document.getElementById(l).checked == false && // с таким же name, если на них не выбраны
			document.getElementById(m).checked == false) // значения из других столбцов
		{
			document.getElementById(l).disabled = false;
			document.getElementById(m).disabled = false;
		}
	} //После этого приводим в нужное состояние строчку только что выбранной кнопки 
	y = parseInt(a) % 10; // Узнаем последнюю цифру нового выбранного элемента
	if (y == 1) // Определяем, какие id у оставшихся элементов в строке
	{
		var b = parseInt(a)+1;
		var c = parseInt(a)+2;
	}
	if (y == 2) // в зависимости от последней цифры
	{
		var b = parseInt(a)+1;
		var c = parseInt(a)-1;
	}
	if (y == 3) // выбранного элемента
	{
		var b = parseInt(a)-2;
		var c = parseInt(a)-1;
	}
	if (document.getElementById(a).checked == true) // Делаем элемент disabled
	{
		document.getElementById(b).disabled = true;
		document.getElementById(c).disabled = true;
	}
}
</script>
</head>
<body>
1 
<input type=radio name='first' id=1231 value=1231 onclick='EnableDisable(this);'>
<input type=radio name='second' id=1232 value=1232 onclick='EnableDisable(this);'>
<input type=radio name='third' id=1233 value=1233 onclick='EnableDisable(this);'>
<br>
2 
<input type=radio name='first' id=4561 value=4561 onclick='EnableDisable(this);'>
<input type=radio name='second' id=4562 value=4562 onclick='EnableDisable(this);'>
<input type=radio name='third' id=4563 value=4563 onclick='EnableDisable(this);'>
<br>
3 
<input type=radio name='first' id=7891 value=7891 onclick='EnableDisable(this);'>
<input type=radio name='second' id=7892 value=7892 onclick='EnableDisable(this);'>
<input type=radio name='third' id=7893 value=7893 onclick='EnableDisable(this);'>
<br>
4 
<input type=radio name='first' id=7531 value=7531 onclick='EnableDisable(this);'>
<input type=radio name='second' id=7532 value=7532 onclick='EnableDisable(this);'>
<input type=radio name='third' id=7533 value=7533 onclick='EnableDisable(this);'>
<br>
</body>
<html>

Форум

Справочник

Discord чат

Курсы javascript