javascript提交未选中复选框的默认值

Posted 2023-05-09

【中文标题】javascript提交未选中复选框的默认值

【英文标题】：javascript submit default value for unchecked checkboxes

【发布时间】：2018-01-15 03:31:50

【问题描述】：

在我的表单中，我有一系列复选框供用户同意某些事情。我不需要他们检查全部或任何特定的，但我确实需要电子邮件的收件人轻松分辨哪些未检查（他们不同意的条款）

我尝试添加具有相同名称的隐藏复选框，但在选中可见的复选框时，电子邮件获取两个响应，导致令人困惑的电子邮件。

单选按钮不是答案，因为我只想让用户看到一个复选框并选中它（或不选中它！）

仅供参考，php 不是可用的选项。我更喜欢 javascript 或 jquery。

我不擅长 javascript，但我尝试了以下操作，但没有成功（当检查可见响应时，它发送了两个响应）：

<input type="hidden" name="Name1" id="Hidden1" value="NOT ANSWERED" checked />
<input type="checkbox" name="Name1" id="Visible1" value="Yes" onchange="document.getElementById('Hidden1').checked = false;" />

【问题讨论】：

你必须从服务器发送这封电子邮件的地方，这就是你应该处理这个问题的地方，而不是通过添加许多不必要的东西在客户端，因为你的服务器端代码无法处理像这样简单的事情几个复选框。

你说得对，它应该在服务器端完成，但我不想这样做 - 他们有一个脚本可以处理所有表单，所以我不想碰它。我最终编写了一个脚本来在表单和他们的脚本之间切换，并且能够使其工作 - 但它很丑陋。我真的认为使用 javascript 可能有一种更简单、更优雅的方法。

【参考方案1】：

这是一个示例，说明如何使用data 属性为未检查的输入获取默认值。

html

<form id="form">
  <input type="checkbox" name="terms_1" data-unchecked-value="not-agree" value="agree" checked />
  <input type="checkbox" name="terms_2" data-unchecked-value="not-agree" value="agree" />
  <button type="submit">
    submit
  </button>
</form>

JS

var form = document.querySelector('#form')

function getValue(node) 
  return node.checked ? node.value : node.dataset.uncheckedValue


form.addEventListener('submit', function(event) 
  event.preventDefault();

  var terms1 = getValue(this.terms_1)
  var terms2 = getValue(this.terms_2)

  console.log(terms1, terms2)
)

JSFiddle 演示：https://jsfiddle.net/Lo6g7so5/1/

【讨论】：

谢谢 - 我看到这在控制台中工作，但我如何让它提交到我的表单脚本？ （我事先承认我不擅长 javascript -对不起！）