Форум

dreckin · #1 (**permalink**) 01.05.2010, 11:23

Всем добрый день и с праздником.
я начал изучение 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 дня мучаюсь уже, не знаю как сделать.

subzey · #2 (**permalink**) 01.05.2010, 13:56

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

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

dreckin · #3 (**permalink**) 01.05.2010, 14:07

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

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

exec · #4 (**permalink**) 01.05.2010, 14:22

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

Octane · #5 (**permalink**) 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 · #6 (**permalink**) 01.05.2010, 14:35

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

Gvozd · #7 (**permalink**) 01.05.2010, 14:41

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

dreckin · #8 (**permalink**) 01.05.2010, 17:37

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

<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 · #9 (**permalink**) 01.05.2010, 17:50

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

Octane · #10 (**permalink**) 01.05.2010, 17:53

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

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

Форум

Справочник

Discord чат

Курсы javascript