Question

我有几个复选框，其名称为checkBoxName []。我如何读取其中的值？我将其提交到handleSubmit函数，但无法使用Fetch发布。

在我的Submit函数中，我尝试了一下，但没有成功，并返回了<div> <input type='checkbox' name='checkBoxName[]' value='1'/> <input type='checkbox' name='checkBoxName[]' value='2'/> <input type='checkbox' name='checkBoxName[]' value='3'/> </div>。我使用console.log查看返回的内容。

Uncaught TypeError: Cannot read property 'value' of undefined

有人可以告诉我如何读取该值并将其正确发布吗？谢谢

编辑：我想看看数组将如何传递到服务器。

Answer 1

您可以使用event.target.name来获取触发事件的元素的名称。

Answer 2

我无法确定您是否正在使用带有适当提交按钮的表单，还是仅通过复选框呈现div。我假设这是第二个。

这是您可以采取的方法。

基本上，event.target可能无法使用，具体取决于您的设置。假设您的复选框是目标元素的子元素，那么它将起作用。但事实并非如此。如果是这样，则只需建立对复选框容器的引用，并在单击按钮时获取名称值即可。

const submit = (evt) => {
  const inputs = document.querySelectorAll('#checkboxes input[type="checkbox"]');
  for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i].getAttribute('name'));
  }
};

document.getElementById('button').addEventListener('click', submit);

 <div id="checkboxes">
    <input type='checkbox'  name='checkBoxName[]' value='1'/>
    <input type='checkbox'  name='checkBoxName[]' value='2'/>
    <input type='checkbox'  name='checkBoxName[]' value='3'/>
  </div>
  
  <button id="button">Submit</button>

如何event.target的形式是一个数组的名称？

2 个答案: