Помогите с 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: |
Что-то Вы не так делаете, раз Вам это нужно.
Сделать в яваскрипте что-то противоестесственное браузеру не достижение. Достижение — сделать так, чтобы браузер выполнял за Вас 90% работы. |
Я бы с удовольствием просто поменял name в обоих radio button на R1 и не парился.
Но такое у меня задание: С каким синтаксисом Вы можете обратиться к обеим радио-кнопкам (One и Two) на HTML-странице? |
var a = document.forms[0]; // 0 — номер формы, в которой кнопки находятся a.R1.param = a.R2.param = value; |
<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 (Да, такие есть!) не смогут корректно заполнить вашу форму. |
Огромное спасибо, щас попробую.:dance:
|
на крайняк, чтобы сохранить смысл учебного задания(я правильно понял?), задайте им имена R[1] и R[2]
|
Цитата:
Я так понимаю работает этот скрипт только после кода кнопок? т.е. в head его не вставить? |
можете повесить его на window.onload, или на событие доступности DOM
|
Если его вставить в <head> в таком виде, как сейчас, то метод getElementsByName будет возвращать пустой массив, так как на момент выполнения скрипта, нужные элементы еще не успеют подгрузиться. Можно запустить по событию DOMContentLoaded (гуглите его кросс-браузерную реализацию) или window.onload, если так хочется в <head> засунуть скрипт. Но проще просто перед </body> располагать все скрипты.
------ не успел) |
И хотелос бы чуть разобраться в коде чтоб понять и больше не возвращатся к теме.
Итак:
var R1 = document.getElementsByName("R1")[0], R2 = document.getElementsByName("R2")[0];
Определяет переменные R1 и R2 ?
R1.onclick = R2.onclick = function () { /* Не понял
var other = this == R1 ? R2 : R1; /* Не понял
if (this.checked) { /* Если выбран один radio то другой выбрать нельзя
other.checked = false;
}
};
Будьте так добры обьясните пожалуйста. |
Цитата:
var R1 = document.getElementsByName("R1")[0], R2 = document.getElementsByName("R2")[0];
здесь? |
R1.onclick = R2.onclick = function () { /* создается анонимная функция, и задается в качестве обработчика щелчка для обоих элементов
var other = this == R1 ? R2 : R1; /* гуглите тернарный оператор.по сути краткая запись для else-if, в данном случае
if (this.checked) { /* Если выбран один radio то другой выбрать нельзя
other.checked = false;
}
};
Цитата:
<input type="radio" name="R[1]" value="one"> <input type="radio" name="R[2]" value="two"> и здесь
var R1 = document.getElementsByName("R[1]")[0], R2 = document.getElementsByName("R[2]")[0];
|
Спасибо, вроде понял.
Скачал еще книжок с этого сайта. Почитаю |
А разве хорошо код javascript прямо перед </body> размещать?
Страница еще не успевает загрузиться, пользователь уже начинает щелкать на кнопки, а они не срабатывают... |
Цитата:
|
| Часовой пояс GMT +3, время: 13:30. |