使用 JavaScript 在控制台中单击任何单选按钮时如何显示特定值？

Question

我无法显示所选单选按钮的值。当我点击问题 1 时，结果 1 应该显示在控制台上，但我得到了 radio button.Can 的所有值有人帮我吗？谢谢

html

<form onsubmit="return answers(event)">
    <label>Question 1</label>
    <input type="radio" class="question" value="1">
    <label>Question 2</label>
    <input type="radio" class="question" value="2">
    <label>Question 3</label>
    <input type="radio" class="question" value="3">

    <button type="submit">Submit</button>
</form>

JavaScript

<script>

    function answers(event)
    {
        var q = document.querySelectorAll('.question');
        [...q].forEach(question =>{

            console.log(question.value);
        });

        event.preventDefault();
    }
</script>

Answer 1

您可以查看是否已通过 question.checked 进行检查。

function answers(event)
    {
        var q = document.querySelectorAll('.question');
        [...q].forEach(question =>{
            if(question.checked){
                console.log(question.value);
            }
        });

        event.preventDefault();
    }

您可能还想为所有收音机添加名称，因为收音机的理念是一次只能勾选其中一个。 name 为您做到这一点：

<form onsubmit="return answers(event)">
    <label>Question 1</label>
    <input type="radio" class="question" value="1" name="question">
    <label>Question 2</label>
    <input type="radio" class="question" value="2" name="question">
    <label>Question 3</label>
    <input type="radio" class="question" value="3" name="question">

    <button type="submit">Submit</button>
</form>

Answer 2

而不是在循环中检查 checked 属性。您可以使用 :checked 伪 class 仅 select 选中的收音机。

function answers(event)
{
    var q = document.querySelectorAll('.question:checked');
    [...q].forEach(question =>{

        console.log(question.value);
    });

    event.preventDefault();
}

<form onsubmit="return answers(event)">
    <label>Question 1</label>
    <input type="radio" class="question" value="1" name="question">
    <label>Question 2</label>
    <input type="radio" class="question" value="2" name="question">
    <label>Question 3</label>
    <input type="radio" class="question" value="3" name="question">

    <button type="submit">Submit</button>
</form>

还要注意使用 name 属性对单选按钮进行分组。

使用 JavaScript 在控制台中单击任何单选按钮时如何显示特定值？

How to show specific value when click on any radio button in console using JavaScript?

javascript

forms

radio