Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с radio button. Не стандартное решение (https://javascript.ru/forum/dom-window/9146-pomogite-s-radio-button-ne-standartnoe-reshenie.html)

dreckin 01.05.2010 11:23

Помогите с radio button. Не стандартное решение
 
Всем добрый день и с праздником.
я начал изучение JavaScript и у меня стоит такая задача:
Есть код формы в котором есть 2 radio button с разными именами (1. name="R1" и 2. name="R2")
задача стоит сделать чтоб была возможность отметить только одну R1 или R2. причем не меняя имени "name". Сделать нужно с помощью javascript.

Собстно код:

...
<tr>
<td width="150" align="right">
<sup>*</sup>
</td>
<td width="30">
<input type="radio" name="R1" value="one"> </td>
<td width="30">One</td>
<td width="30">
<input type="radio" name="R2" value="two"> </td>
<td width="30">Two</td>
</tr>


Помогите пожалуйста, 3 дня мучаюсь уже, не знаю как сделать.:cray:

subzey 01.05.2010 13:56

Что-то Вы не так делаете, раз Вам это нужно.

Сделать в яваскрипте что-то противоестесственное браузеру не достижение. Достижение — сделать так, чтобы браузер выполнял за Вас 90% работы.

dreckin 01.05.2010 14:07

Я бы с удовольствием просто поменял name в обоих radio button на R1 и не парился.

Но такое у меня задание:
С каким синтаксисом Вы можете обратиться к обеим радио-кнопкам (One и Two) на HTML-странице?

exec 01.05.2010 14:22

var a = document.forms[0]; // 0 — номер формы, в которой кнопки находятся
a.R1.param = a.R2.param = value;

Octane 01.05.2010 14:24

<fieldset>
	<div>
		<input type="radio" id="R1" name="R1" />
		<label for="R1">One</label>
	</div>
	<div>
		<input type="radio" id="R2" name="R2" />
		<label for="R2">Two</label>
	</div>
</fieldset>
<script type="text/javascript">
(function () {
	var R1 = document.getElementsByName("R1")[0], R2 = document.getElementsByName("R2")[0];
	R1.onclick = R2.onclick = function () {
		var other = this == R1 ? R2 : R1;
		if (this.checked) {
			other.checked = false;
		}
	};
})();
</script>
Но лучше поставить name="R[]" и обрабатывать результат на сервере, иначе пользователи без JavaScript (Да, такие есть!) не смогут корректно заполнить вашу форму.

dreckin 01.05.2010 14:35

Огромное спасибо, щас попробую.:dance:

Gvozd 01.05.2010 14:41

на крайняк, чтобы сохранить смысл учебного задания(я правильно понял?), задайте им имена R[1] и R[2]

dreckin 01.05.2010 17:37

Цитата:

Сообщение от Octane (Сообщение 53857)
<script type="text/javascript">
(function () {
	var R1 = document.getElementsByName("R1")[0], R2 = document.getElementsByName("R2")[0];
	R1.onclick = R2.onclick = function () {
		var other = this == R1 ? R2 : R1;
		if (this.checked) {
			other.checked = false;
		}
	};
})();
</script>

Спасибо за помощь.
Я так понимаю работает этот скрипт только после кода кнопок? т.е. в head его не вставить?

Gvozd 01.05.2010 17:50

можете повесить его на window.onload, или на событие доступности DOM

Octane 01.05.2010 17:53

Если его вставить в <head> в таком виде, как сейчас, то метод getElementsByName будет возвращать пустой массив, так как на момент выполнения скрипта, нужные элементы еще не успеют подгрузиться. Можно запустить по событию DOMContentLoaded (гуглите его кросс-браузерную реализацию) или window.onload, если так хочется в <head> засунуть скрипт. Но проще просто перед </body> располагать все скрипты.

------
не успел)


Часовой пояс GMT +3, время: 21:28.