如何获取复选框值？

Posted 2023-03-04

【中文标题】如何获取复选框值？

【英文标题】：How to get checkbox value?

【发布时间】：2021-08-08 20:20:03

【问题描述】：

我正在尝试创建简单的表单，该表单将发送到谷歌表格，并且我收到除复选框值之外的所有值。我一直在“开启”价值，但我不明白为什么。

var formData = new FormData();
document.querySelectorAll("form").forEach(f => 
  let obj = ;
  f.querySelectorAll("input").forEach(ele => obj[ele.name] = ele.value || "");
  for (const key in obj) 
        formData.append(key, obj[key]);
    
)
const scriptURL = 'https://script.google.com/macros/s//exec'
      fetch(scriptURL,   method: 'POST', body: formData)
            .then(response => alert("You have successfully submitted."))
            .catch(error => console.error('Error!', error.message))

    <div class="modal-body modal-body-step-5">
  <div class="title">Almost..</div>
  <div class="description">What type of materials do you want to install?</div>
  <form>
    <div class="control-group">
        <label class="control control-checkbox">
              Hardwood
              <input name="Materials" type="checkbox" value="Hardwood"/>
              <div class="control_indicator"></div>
       </label>
       <label  class="control control-checkbox">
              Vinyl
              <input name="Materials" type="checkbox" value="Vinyl"//>
              <div class="control_indicator"></div>
       </label>
       <label class="control control-checkbox">
              Laminate
              <input name="Materials" type="checkbox" value="Laminate"/>
              <div class="control_indicator"></div>
       </label>
       <label class="control control-checkbox">
              Other
              <input name="Materials" type="checkbox" value="Other"/>
              <div class="control_indicator"></div>
       </label>
    </div>
    <div class="text-center fade-in">
      <div class="button">Next</div>
    </div>
  </form>
</div>

【问题讨论】：

在这种情况下一组单选按钮不是更有意义吗？

这能回答你的问题吗？ Checkbox value is always 'on'

您是否尝试在表单提交时添加事件侦听器？也许问题是您从未获得过值，而是获得了没有任何复选框的输入

【参考方案1】：

据我所知，复选框的值仅在选中时才会发送到服务器。如果未选中该复选框，您的后端将不会知道该复选框位于发送到后端的正文中的任何位置。

这意味着如果您从复选框中收到 on 值，则复选框已被选中，如果发送的正文中不存在则未选中。

我希望它是有意义的，你可以解决你的问题。

【参考方案2】：

这里需要考虑三件事：

复选框名称 (input.name)：在本例中为材料 复选框值(input.value)：是复选框的值 复选框已选中/未选中状态 (input.checked)

如果输入被选中，输入的值将在表单提交时在 input.name 的值下发送