时间戳

首页 > 解决方案 > 如何在 JavaScript/Node.js 中获取选中复选框的所有值

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

问题描述

我有一组类似于此的 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 提前获得选中复选框的所有值

标签： javascripthtmlnode.js

解决方案

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>

推荐阅读