Работа с элементом RadioButton в JavaScript очень похожа на работу с элементом checkbox, однако в отличие от последнего, radiobutton позволяет выбрать всего лишь одну опцию из множества. Пример:
Первый
Второй
Третий
Код в HTML для radiobutton выглядит следующим образом. Обратите внимание, что для того, чтобы объединить элементы в группу им присвоен одинаковый name.
|
1 2 3 |
<input name="r1" type="radio" value="5"> Первый <input name="r1" type="radio" value="13"> Второй <input name="r1" type="radio" value="53"> Третий |
Проверка состояния чуть отличается от checkbox, поскольку radiobutton обычно используется не один, а в группе. Таким образом, нам необходимо перебрать все элементы radiobutton и определить какой из них выбран. Пример:
|
1 2 3 4 5 6 7 8 |
function fun1() { var rad=document.getElementsByName('r1'); for (var i=0;i<rad.length; i++) { if (rad[i].checked) { alert('Выбран '+i+' radiobutton'); } } } |
See the Pen radiobuttons, js by Alex (@luschenko) on CodePen.
Обратите внимание на запись
|
1 |
var rad=document.getElementsByName('r1'); |
После выполнения команды getElementsByName переменная rad содержит массив элементов radiobutton. Именно поэтому дальнейшая работа с данной переменной должна вестись как с массивом. В следующих строках мы перебираем каждый элемент массива и проверяем, не выбран ли он. Если выбран — то выводим alert.
|
1 2 3 4 5 |
for (var i=0;i<rad.length; i++) { if (rad[i].checked) { alert('Выбран '+i+' radiobutton'); } } |
Данные строки запускают цикл от 0 до длины массива (rad.length) и проверяют каждый элемент массива на свойство checked, которое для выбранных элементов равно true.
