复选框值未识别-解网

问：

嗨，我是 Web 开发的新手，从事简单的项目，如果有人可以提供帮助，我会遇到一个问题。我有 3 个复选框，用户可以检查他们最喜欢做的事情。完成问题后，我正在尝试记录所选框的值，但是如果有人可以帮助我表示感谢，我会得到无法识别的结果。代码如下： html格式：

What is your favorite thing to do:
    <p id = "favoriteThings">
        <input type="checkbox" name="TV" value=1>Watch TV
        <input type="checkbox" name="Books" value=2>Read Books
        <input type="checkbox" name="work" value=3>Work
    </p>

JS：

var favoriteThings = document.getElementById("favoriteThings");
console.log("favorite things: " + favoriteThings.value);

我假设问题是段落标签是 ID，但有人可以给我解决这个问题吗？因为我不想给每个复选框提供与我听到的不良做法相同的 ID。提前致谢。

JavaScript 的HTML

问题是你得到的是一个没有值的 <p> 元素的值（未定义）。您可以为所有 3 个输入提供 ID，然后像现在一样获取它们的值（“checked”布尔属性，而不是“value”）。无论如何，看起来您正在尝试实现一个自定义的单选按钮：w3schools.com/tags/att_input_type_radio.asp

0赞 Roko C. Buljan 12/8/2021

不要使用 w3schools 作为您的事实来源。尽管如此，在这个日期（几乎是 2022 年），它是学习编码的最糟糕的网站。它不是一个社区驱动的网站，它充满了不良实践的例子，而且他们出售不相关的证书。

答：

0赞 Roko C. Buljan 12/8/2021 #1

当您要对复选框（或单选按钮）输入进行分组时，请对输入组使用相同的方法name
使用不同的value
使用 querySelectorAll（）通过属性选择器获取所需的元素"[]"
使用 nodeList.forEach（）迭代元素
使用 addEventListener（）附加一个 Event，在您的例子中："input"

const ELs_favorite = document.querySelectorAll("[name=favorite]");

const get_favorite = () => {
  const checked_values = [...ELs_favorite].reduce((arr, EL) => {
    if (EL.checked) arr.push(EL.value);
    return arr;
  }, []);
  console.log(checked_values);
};

ELs_favorite.forEach(EL => {
  EL.addEventListener("input", get_favorite);
});

What is your favorite thing to do:
<p>
  <label><input type="checkbox" name="favorite" value="tv">Watch TV</label>
  <label><input type="checkbox" name="favorite" value="books">Read Books</label>
  <label><input type="checkbox" name="favorite" value="work">Work</label>
</p>

在上面的示例中，Array.reduce（）用于仅将输入元素的 s 收集到 Array 中。valuechecked

-1赞 user16789193 12/8/2021 #2

您可以为每个复选框提供相同的 ID（没有问题）。

溶液：

    <p id = "favoriteThings">
        <input type="checkbox" name="favoriteThings" value="TV" or "1" onclick="MyNameFunction()">Watch TV
        <input type="checkbox" name="favoriteThings" value="Read Books" or "2"  onclick="MyNameFunction()">Read Books
        <input type="checkbox" name="favoriteThings" value="Work" or "3"  onclick="MyNameFunction()">Work
    </p>

JS的

    var choices = [];
    var els = document.getElementsByName('favoriteThings');
    console.log("Favourite things: ");
    for (var i=0;i<els.length;i++){
    if ( els[i].checked ) {
     console.log(els[i].value);
    }

复选框值未识别

checkbox value unidentified

评论

评论