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

Determine value of checkbox + hidden field combo using JavaScript

本文关键字：字段 组合 隐藏 JavaScript 复选框 使用      更新时间：2023-09-26
复选框

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

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

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

回发时，HTTP 请求包含两个值之一（选中时）：

条款协议

=真&条款协议=假

或一个值（如果未选中）：

条款协议=假

这很容易处理，因为您只需OR任何一种方式的值，您都会得到正确的值。

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

在这种情况下，有没有一种优雅的方法可以相当容易地使用 JavaScript 或 jQuery 确定值？

我从来没有为隐藏字段而烦恼。在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 <= 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);
   }
}

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

相关文章：