Определение индекса радио переключателя
Если вам нужно простое решение для определения индекса какой из радио-переключателей включен, то здесь я покажу простое универсальное решение.
Возьмём для примера три вот таких радио-переключателя:
Индекс: 0
Напомню, что в программировании отчёт элементов массива начинается с нуля. Поэтому в демке при выбранном первом переключателе в результате мы видим именно нуль, Для второго - 1 и для третьего - 2.
HTML-код данных радио-переключателей:
<div>
<input type="radio" id="r1" name="parekl" checked>
<label for="r1">Первый</label>
<input type="radio" id="r2" name="parekl">
<label for="r2">Второй</label>
<input type="radio" id="r3" name="parekl">
<label for="r3">Третий</label>
</div>
Как мы знаем, у группы радио-переключателей атрибут name
обязателен и он имеет одинаковое значение. В данном примере я задал значение parekl
.
Для определения индекса активного переключателя я беру вот такую функцию:
function getIndexRadio(nameAttribute) {
let index;
document.querySelectorAll('[name="' + nameAttribute + '"]').forEach((el, i) => el.checked ? index = i : 0);
return index;
}
Эта функция возвращает индекс активного переключателя. Параметром функция принимает значение атрибута name
радио-переключателей у которых нужно определить индекс.
То есть чтобы получить индекс активного радио-переключателя, нам достаточно просто вызвать нашу функцию getIndexRadio
передав параметром значение атрибута name
группы наших переключателей:
getIndexRadio('parekl')
Для примера объявим переменную indexRadio
и запишем в неё индекс активного переключателя:
let indexRadio = getIndexRadio('parekl');
Вместо parekl
вы можете вызывать данную функцию со своим значением атрибута name
у переключателей. Функция будет возвращать индекс активного переключателя у группы радио-кнопок с переданным вами параметром значения их атрибута name
.
*** Войдите чтобы писать комментарии.