使用JavaScript确定复选框+隐藏字段组合的值

Question

复选框的一个常见做法是将其与隐藏字段配对，即使未选中该复选框，也会确保HTTP帖子始终包含值。

例如，如果我有一个术语复选框，我可以像这样实现它，同时使用复选框和隐藏元素：

<input type="checkbox" name="termsAgreement" value="true"> I accept the terms.
<input type="hidden" name="termsAgreement" value="false">

回发后，HTTP请求包含两个值（如果选中）：

  

termsAgreement = true＆amp; termsAgreement = false

或一个值（未选中时）：

  

termsAgreement =假

这很容易处理，因为你只需要OR值，你将得到正确的值。

但是，如果你想确定客户端的正确值，我能想到的唯一解决方案涉及一些非常讨厌的逻辑。

在这种情况下，是否有一种优雅的方法可以使用JavaScript或jQuery轻松确定值？

Answer 1

我从未对隐藏的领域感到困扰。在PHP或Java中，我只使用isset（或等效的）方法来查看值是否存在，并在不存在时将其视为未选中。

在你的情况下，我会给复选框本身一个id，并使用checked属性来查看它是否被选中。

HTML：

<input id="termsAgreementCB" type="checkbox" name="termsAgreement" value="true">

使用Javascript：

var cbRef = getElementById('termsAgreementCB');
if(cbRef.checked) {
   /// The checkbox is checked. 
}

JQuery＆lt; = 1.5

if($('#termsAgreementCB").attr('checked')) {
   /// The checkbox is checked.
}

JQuery 1.6

if($('#termsAgreementCB").prop('checked')) {
   /// The checkbox is checked.
}

修改 根据您的评论，我会查看您的MVC文档，看看是否可以在输出的输入上放置ID。如果没有，你可以将它们包装在div中。

var $value = ''`enter code here`;
$('#myDiv input').each() {
   if($(this).attr('type') == 'checkbox' && $(this).attr('checked')) {
      $value = $(this).attr('value');
   } else if($(this).attr('type') == hidden && $value == '') {
      $value = $(this).attr('value);
   }
}

如果您有多个复选框，只需将其抽象为方法。