Как получить доступ к значению этого поля ввода, которое проверяется его атрибутом имени, используя Javascript:

<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">

Я пишу это:

document.querySelector('input[name="rate"]:checked').value;

Но есть ошибка:

TypeError: document.querySelector(...) is null

И я не хочу проверять какие-либо входы по умолчанию

1
sahar 31 Май 2020 в 14:03

6 ответов

Лучший ответ

Не уверен, поможет ли это вам, но этот фрагмент позволяет вам выбрать значение проверяемого радиоэлемента, если он существует.

radioElems = document.querySelectorAll("input[name='rate']");
radioElems.forEach((elem) => {
    if (elem.checked) {
        console.log(`Check found with value ${elem.value}`);
    } else {
        console.log("Not checked");
    }
});
0
Tymotex 31 Май 2020 в 11:24

То, что вы делаете, абсолютно правильно! Вам просто нужно вызвать это в onchange ввода. Поскольку вы вызываете это, когда никакие входные данные не проверены, вы получаете эту ошибку.

function handleChange1(){
console.log(document.querySelector('input[name="rate"]:checked').value);

}
<input type="radio" onchange="handleChange1();" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
0
ABGR 31 Май 2020 в 11:37

Запускайте функцию каждый раз, когда изменяется статус ввода, используя onchange, эта функция, в свою очередь, регистрирует значение щелчкового ввода

var rate = document.querySelectorAll(('input[name="rate"]'))

rate.forEach( each => (each.onchange = () => (console.log(each.value))))
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
0
dqve 31 Май 2020 в 11:28

Вы можете проверить, соответствует ли какой-либо элемент вашему querySelector, прежде чем получить доступ к значению, как это:

document.querySelector('input[name="rate"]:checked') && document.querySelector('input[name="rate"]:checked').value
0
PatrykBuniX 31 Май 2020 в 11:17

Вы должны вызывать функцию для каждого события смены переключателя

function handleRadioButtonChange() {
  console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" class="radioButton" name="rate" value="1" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="2" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="3" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="4" onchange="handleRadioButtonChange()">
0
barzin.A 31 Май 2020 в 11:11

Вы пропускаете цитаты:

document.querySelector('input[name="rate"]:checked').value;
0
fraggley 31 Май 2020 в 11:07