选中/取消复选框

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。

---

你可以写你的后端代码期待领域具有一定的名字，并做出相应的反应，他们丢失的情况。

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> 

这将使参数进来值的数组：“参考检查”序列，如果复选框被选中，只是“参考”，如果它没有被选中。你可以有任意数量的这种复选框，这不会影响你的逻辑。

现在用于服务器端。假设你得到你的“复选框”作为一个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); 
    } 
} 

现在你有布尔的一个很好的阵列相关的订单，数量和状态复选框，你有。