问如何在JavaScript/Node.js中获取选中复选框的所有值
EN

Stack Overflow用户

提问于 2020-02-21 05:54:48

回答 3查看 89关注 0票数 0

我有一组html形式的复选框，如下所示

<form action = "/submit" method = "POST">  
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple">
    <label for="val1"> Apple </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana">
    <label for="val2"> Banana </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear">
    <label for="val3"> Pear </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
    <label for="val4"> Grinadella </label>
  </div>
</form>

表单内容存储在数据库中。存储工作正常，但是我只能获取第一个复选框的值并将其存储在数据库中。我想要做的是，如果用户选中前三个复选框，我希望将值Apple, Banana, Pear存储在数据库中，用逗号分隔。

我该怎么做呢。我知道在PHP中有一个名为implode的函数可以做到这一点，但是我如何扩展表单，以便在JS/Node.js中获得所有选中复选框的值呢？

html

node.js

javascript

回答 3

Stack Overflow用户

发布于 2020-02-21 05:59:13

您必须选中复选框的值

var checkBox = req.body.checkBox

if(checkBox ===true)
console.log('It is true')

我希望你明白我的意思！

票数 0

Stack Overflow用户

发布于 2020-02-21 06:00:28

您可以尝试使用map()和join()方法：

var checkedBoxes = [...document.querySelectorAll('.styled:checked')]
var values = checkedBoxes.map(c => c.value).join(', ')
console.log(values)

<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple" checked>
  <label for="val1"> Apple </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana" checked>
  <label for="val2"> Banana </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear" checked>
  <label for="val3"> Pear </label>
</div>
<br>
<div class="checkbox checkbox-inline checkbox-danger checkbox-md">
  <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
  <label for="val4"> Grinadella </label>
</div>

票数 0

Stack Overflow用户

发布于 2020-02-21 06:01:14

您可以首先使用querySelectorAll(':checked')选中所有选中的复选框。然后，您可以对它们执行操作以找到值。最后，使用命令获取字符串。

演示：

function getAllChecked(){
 var checked = document.querySelectorAll(':checked');
 var res = Array.from(checked).map(c => c.value).join(', ');
 console.log(res);
 return false; // prevent the form submission
}

<form action = "/submit" method = "POST">
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val1" name="value[]" value="Apple">
    <label for="val1"> Apple </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val2" name="value[]" value="Banana">
    <label for="val2"> Banana </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val3" name="value[]" value="Pear">
    <label for="val3"> Pear </label>
  </div>
  <br>
  <div class="checkbox checkbox-inline checkbox-danger checkbox-md">
    <input type="checkbox" class="styled" id="val4" name="value[]" value="Grinadella">
    <label for="val4"> Grinadella </label>
  </div>
  <button onclick="return getAllChecked()">Show Checked</button>
</form>