Обработка radio buttons

[wrbanker]

Приветствую.
Стоит задача: показать выбранное значение radio. Работает только при выборе первого переключателя. В остальных случаях показывает, что переключатель не выбран. Помогите, плиз, понять где ошибка.

<form id="test-form">        
     <ul>
         <li><input type="radio" name="radio-button" value="one"></li>
         <li><input type="radio" name="radio-button" value="two"></li>
         <li><input type="radio" name="radio-button" value="three"></li>
     </ul>
     <input type="submit" value="Обработать">
</form>
             
    <script>
        const form = document.querySelector('#test-form');
        form.addEventListener('submit', function (event) {         
            const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.querySelector('[name="radio-button"]').value : 0;           
            alert (testValue);            
        });
    </script>

[voraa]

const testValue = this.elements['radio-button'].value;

[wrbanker]

const testValue = this.elements['radio-button'].value;

Спасибо! А почему вот этот код некорректно работает?

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;

[voraa]

Спасибо! А почему вот этот код некорректно работает?

const testValue = (this.querySelector('[name="radio-button"]').checked) ? this.elements['radio-button'].value : 0;

Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.

[wrbanker]

Потому, что querySelector выбирает только один (первый) элемент
Если их несколько, надо использовать querySelectorAll - получить ВСЕ элементы и перебирать их в цикле.

Да, про это я забыл. Спасибо. Работает только такой вариант:

const testValue = this.querySelector('[name="radio-button"]:checked').value

Тогда у меня ещё один вопрос. Можно ли обойтись без цикла, чтобы переменной присваивать значение radio, которое отмечено и '0' если не отмечено ничего? Через условное ветвление, например?

[laimas]

Можно ли обойтись без цикла

А как вы думаете работает querySelector, знает что в третьем ряду слева нужное? Как бы не так, это обход циклом элементов формы, причем DOM, и это при том, что у this (формы) они уже доступны. Выведите в консоль this, изучите.

Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?

[wrbanker]

Какова вообще цель, может вы делаете то, без чего вообще можно обойтись?

Внутри формы есть несколько элементов input различных типов: number, date, radio, checkbox. При событии submit необходимо переменным присвоить определенные значения. В типах number и date - введенное значение или '0', если поле ввода не заполнено, в типе checkbox - '0' или'1', в типе radio - значение переключателя или '0', если ни один из переключателей не выбран.

[laimas]

wrbanker, так задачи не описывают, это просто рассказ о нулях.

У вас форма, у нее поля, если нужно привести соответствие состояния неких переменных состоянию полей, значит простой обойти поля циклом и ... Но для этого нужно связать сами переменные с полями. В тоже время почему имена полей и их значения не могут сами служить таким набором?

[wrbanker]

Ок, попробую описать задачу иначе. Есть страница с условной анкетой. После её заполнения пользователь нажимает кнопку и получает документ, который определён его ответами.
Я думаю, что перво-наперво необходимо отловить все его ответы и присвоить зависимые от ответов значения переменным. Далее, анализируя значения переменных, формировать документ.
Возможно, что я не прав.

[laimas]

Вот это уже ближе к телу, а тут два сценария - если этот документ готовит сервер, то то что вы делаете на клиенте лишено смысла. Серверу нужно просто отправить форму, он должен анализировать что пришло. Если документ готовится на клиенте, то зачем посредник в виде 0 и ... Формируйте документ, в который вставляйте нужное, получая ответы из обхода циклом полей формы.