Question

我的div如下：

<div class="questionholder" id="question5" style="display:none">
        <div>
            <h5>Select all that apply</h5>
            <input class="input5" type="checkbox" id="ID1elementColor" name="ID1element" value="color"><label for="ID1elementColor"><p class="radioChoice">Color</p></label>
            <input class="input5" type="checkbox" id="ID1elementHeight" name="ID1element" value="height"><label for="ID1elementHeight"><p class="radioChoice">Height</p></label>
            <input class="input5" type="checkbox" id="ID1elementWeight" name="ID1element" value="weight"><label for="ID1elementWeight"><p class="radioChoice">Weight</p></label>
        </div>
</div>
<div class="holdButtons">   
            <a class="text2button" onclick="displayquestion(6);">Next</a>
        </div>

用户应选择适用于其情况的所有复选框。假设他选择了所有3个。

当他单击“下一步”时，函数displayquestion（）;会开火。

function displayquestion(a) {
    var Elements = '';
    var b = a - 1;
    Elements = document.querySelector("#question" + b + " input[name=ID1element]").value;
}

基本上，该函数用于将所有检查的值存储到var Elements中，该元素应该是一个数组。

但是，我只得到第一个选定答案的值，而不是所有选定答案的数组。

我如何将所有选择的答案抓取到一个数组中？

请不要使用jQuery。

Answer 1

使用querySelectorAll而不是NodeList来获得类似数组的querySelector，然后可以使用Array.from将NodeList转换为包含以下内容的数组仅所选输入中的.value：

function displayquestion(a) {
  const b = a - 1;
  const elements = Array.from(
    document.querySelectorAll('#question' + b + ' input:checked'),
    input => input.value
  );
  console.log(elements);
}

<div class="questionholder" id="question5">
  <div>
    <h5>Select all that apply</h5>
    <input class="input5" type="checkbox" id="ID1elementColor" name="ID1element" value="color"><label for="ID1elementColor"><p class="radioChoice">Color</p></label>
    <input class="input5" type="checkbox" id="ID1elementHeight" name="ID1element" value="height"><label for="ID1elementHeight"><p class="radioChoice">Height</p></label>
    <input class="input5" type="checkbox" id="ID1elementWeight" name="ID1element" value="weight"><label for="ID1elementWeight"><p class="radioChoice">Weight</p></label>
  </div>
</div>
<div class="holdButtons">
  <a class="text2button" onclick="displayquestion(6);">Next</a>
</div>

Answer 2

所以我首先要为您的变量 <a class="text2button">Next</a>。而且我已经删除了 onclick="displayquestion(6)"来自您的html。

这里是变量。

var text2button = document.getElementsByClassName("text2button")[0];
text2button.addEventListener("click", displayquestion);

这里有功能，所以我要做的是

我创建了一个变量var elements = [];，它是一个空数组。

然后我创建此变量var inputs = document.getElementsByClassName("input5"); 此变量获取所有带有 input5 类的输入。

接下来，我将遍历var inputs的每个输入。这样。

for (var i = 0; i < inputs.length; i++) {
   if (inputs[i].checked) {
      elements.push(inputs[i].value);
   }
}

所以我在这里要做的是遍历每个输入for (var i = 0; i < inputs.length; i++)，然后检查是否检查了任何输入if (inputs[i].checked)，然后用{{将它们推到数组var elements 1}}。

然后我使用elements.push(inputs[i].value);，所以请在控制台中显示它。

查看下面的代码片段以查看其效果。

希望这会有所帮助。

console.log(elements);

var text2button = document.getElementsByClassName("text2button")[0];
text2button.addEventListener("click", displayquestion);

function displayquestion() {
  var elements = [];
  var inputs = document.getElementsByClassName("input5");

  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      elements.push(inputs[i].value);
    }
  }

  console.log(elements);
}

Answer 3

这是您可以用于此的脚本：

我没有更改您HTML结构中的任何内容。除了我已从类display: none;的样式属性中删除了questionholder。

<script>
  function displayquestion(b) {
    let checkboxList = document.querySelectorAll("#question" + b + " input:checked");
    let obj = [];
    if (checkboxList.length > 0) { //Code works only if some checbox is checked
      checkboxList.forEach(function(item) {
        obj.push(item.value); //Contains the value of all the selected checkboxes.
      });
    }
    console.log(obj); //array list containing all the selected values
  }
</script>
<div class="questionholder" id="question5" style="">
  <div>
    <h5>Select all that apply</h5>
    <input class="input5" type="checkbox" id="ID1elementColor" name="ID1element" value="color"><label for="ID1elementColor"><p class="radioChoice">Color</p></label>
    <input class="input5" type="checkbox" id="ID1elementHeight" name="ID1element" value="height"><label for="ID1elementHeight"><p class="radioChoice">Height</p></label>
    <input class="input5" type="checkbox" id="ID1elementWeight" name="ID1element" value="weight"><label for="ID1elementWeight"><p class="radioChoice">Weight</p></label>
  </div>
</div>
<div class="holdButtons">
  <a class="text2button" onclick="displayquestion(5);">Next</a>
</div>

这是一个JSFiddle链接。

我希望这会有所帮助。

如何获取数组中复选框的值

3 个答案: