Определение индекса радио переключателя

Как в JavaScript получить числовой индекс активного радио-переключателя. Функция для определения индекса активной кнопки с примером её использования.

Определение индекса радио переключателя

Если вам нужно простое решение для определения индекса какой из радио-переключателей включен, то здесь я покажу простое универсальное решение.

Возьмём для примера три вот таких радио-переключателя:

Индекс: 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.

Комментарии 0

*** чтобы писать комментарии.