Question

我正在尝试为复选框处于选中状态或未选中时传递值。

但是，它似乎没有通过未检查状态。我正在使用的代码如下：

if (document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').checked == true){
            document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value = 'on';
            }
        else {
            document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value = 'off';
            }

我添加了提醒：

alert(document.getElementById('PRODUCT_REVIEW_EMAILS_FIELD').value);

令人惊讶地显示了“关闭”值 - 但是 - 这没有成功通过。

我错过了什么？

Answer 1

这是正常的，预期的和明确定义的行为。

复选框具有任意value;
当复选框的checked属性启用时，它将作为具有该值的表单的一部分提交;
当复选框的checked属性关闭时，根本不会提交。

HTML 4.01 says：

复选框（和单选按钮）是可由用户切换的开/关开关。当设置了控制元素的checked属性时，开关处于“打开”状态。提交表单时，只有“on”复选框控件才能成功。

And：

当用户提交表单时（例如，通过激活提交按钮），用户代理将按如下方式处理它。


第一步：确定成功的控制

第二步：构建表单数据集   表单数据集是由成功控件构建的一系列控制名称/当前值对。 [..]

HTML5 says similar things。

您可以将后端代码编写为具有特定名称的 expect 字段，并在缺少时做出相应的反应。

Answer 2

您可以通过这种方式处理复选框的真实开/关值（将在复选框打开和关闭时发布）。基本上，它使用名为PRODUCT_REVIEW_EMAILS_FIELD的隐藏表单字段，并使用值填充它。隐藏的表单字段总是发布。

<form>
  <input id="tempCheckbox" type="checkbox" name="Temp_PRODUCT_REVIEW_EMAILS_FIELD">
  <input id="checkboxvalue" type="hidden" name="PRODUCT_REVIEW_EMAILS_FIELD" value="Off">
</form>

<script type="text/javascript">
  document.getElementById("tempCheckbox").onclick = function () {
    if (this.checked) {
      document.getElementById("checkboxvalue").value = "On";
    }
    else {
      document.getElementById("checkboxvalue").value = "Off";
    }
  }
  // used to run on page load to verify the correct value is set incase your server side
  // script defaults the checkbox to on
  document.getElementById("tempCheckbox").onclick(); 
</script>

Answer 3

您可以在服务器端执行此操作，以免在JavaScript上进行中继。为此，您必须在每个复选框之前添加一个引用输入字段。

<form>
  <input type="hidden" name="checkboxes" value="reference"/>
  <input type="checkbox" name="checkboxes" value="checked"/>
</form>

这将使参数出现在值数组中：如果选中复选框，则为“reference-checked”序列，如果未选中则为“reference”。您可以拥有任意数量的此类复选框，这不会影响您的逻辑。

现在是服务器端。假设您将“复选框”作为String数组，这里是解析值的逻辑（用Java）：

List<Boolean> parsed = new ArrayList<Boolean>();
for (int i = 0; i < checkboxes.length; i++) {
    if (i < checkboxes.length - 1 && "checked".equals(checkboxes[i + 1])) {
        parsed.add(true);
        i++;
    else {
        parsed.add(false);
    }
}

现在你有一系列与我们的复选框的顺序，数量和状态相关的布尔值。

选中/取消选中复选框

3 个答案: