Проверка radio- и checkbox- input'ов средствами JavaScript

628

03 июля 2017, 20:43

При отправке формы, содержащей чекбоксы или радио-кнопки на сервер с ними в дальнейшем работать довольно легко, потому как несколько, например, радио-кнопок представлены под одним именем (name) и имеют какое-то определенное значение:

<input type="radio" name="license_accepted" value="true">
<input type="radio" name="license_accepted" value="false">

На сервере:

если (поля_формы["license_accepted"] == "true") делаем какое-нибудь действие;

То есть сколько бы радио-кнопок не было в нашей форме, на сервер попадут только данные для каждой кнопки одного имени.

По-другому, насколько я понимаю, обстоят дела с клиентской частью. Естественно, для checkbox'ов я просто могу проверить атрибут checked, чтобы узнать, выбран ли какой-нибудь определенный чекбокс. Но как быть с теми же радио-кнопками? Как правильно получить значение для "массива" радиокнопок с каким-то конкретным именем?

Насколько я понимаю алгоритм действий, то для начала я должен получить все радио-кнопки с каким-то определенным именем:

let r = document.querySelectorAll('input[type="radio" name="license_accepted"]');

Потом нужно пробежаться по всем всем полученным радио-кнопкам и проверить, установлен ли маркер хоть где-нибудь. Потом, если установлен, нужно проверить, какой именно, и результатом для данного набора полей будет value у выбранного поля.

Собственно, вопрос. Есть ли какие-нибудь методы стандартной библиотеки для работы с полями этого типа? Если нет, то может быть есть какие-нибудь алгоритмы получше моего? Чувствую, что что-то упускаю, но не могу понять, где прокол.

Готовые решения в виде библиотек не интересуют. JQuery-подобные решения также не интересны.

Answer 1

/** 
 * функция isCheck возвращает выбранный элемент на чистом JS без каких-либо библиотек 
 * @param name  
 * @returns {Element} 
 */ 
function isCheck(name) { 
    return document.querySelector('input[name="' + name + '"]:checked'); 
} 
 
// пример использования: 
 
alert(isCheck('r').id);

<div> 
    <label class="radio"> 
        <input type="radio" name="r" id="one">первый 
    </label> 
    <label class="radio"> 
        <input type="radio" name="r" id="two" checked>второй 
    </label> 
</div>