使用 form.serialize 获取正确的复选框值答案

【问题标题】：Get proper checkbox value using form.serialize使用 form.serialize 获取正确的复选框值
【发布时间】：2013-07-23 11:41:00
【问题描述】：

我们目前正在使用$('form').serialize() 获取所有表单信息

这会将任何复选框值返回为“开”或“关”。

有什么方法可以使用相同的方法获得 1/0 或真/假值？

【问题讨论】：

标签： javascript jquery serialization

【解决方案1】：

是的。您可以通过添加一个与复选框同名的隐藏输入来做到这一点，如果未选中复选框，则将提交该值：

<input type="hidden" name="option" value="false"/>
<input type="checkbox" name="option" value="true"/>

如果选中复选框，它将提交两个值。但是服务器端会读取最新的（复选框的值）

【讨论】：

如果你有很多复选框，这种方法会变得笨拙。这是一个更好的方法：stackoverflow.com/a/7108685/399435
绝对不同意你@KarthicRaghupathi。如果具有非透明逻辑的多行自定义 JS 对您来说看起来“更实用”，那就去做吧。最初的问题是关于二进制值，而不是多个。对我来说 - 两行 html 代码是一个更优雅的解决方案。
另一种方法也适用于二进制值。只有它处理表单中的所有复选框。我必须在一个表单中处理 20 个复选框。您的方法意味着 40 个输入标签，而不是几行 JS。
如果页面上有 20 个复选框，那么您还有另一个问题，伙计 - 它的 UX 接近于 0。考虑一下。
EMR/EHR 等一些应用程序具有带有大量复选框的大型表单。这不一定意味着糟糕的用户体验。

【解决方案2】：

表单控件的值总是一个字符串。您可以使用单选按钮为相同的控件名称获取不同的值：

<form ...>
  <input type="radio" name="whatever" value="true">true
  <br>
  <input type="radio" name="whatever" value="false">false
  ...
</form>

只能勾选一项，只有勾选的名称/值才会发送到服务器。

【讨论】：

【解决方案3】：

如果我们的页面中有多个复选框，例如：

  <input id="reminder" name="Check1" value="false" type="checkbox" /> 

  <input id="alarm" name="Check2" value="false" type="checkbox" />

我们必须绑定这些复选框的更改事件，并将其值设置为真或假。

 $('input[type=checkbox]').on('change', function(){
    var name =    $(this).attr('name');
    if($(this).is(':checked')){
    $('input[name= "' +name +'"]').val(true);
        $(this).val(true);
    }
    else{
       $(this).val(false);
       $('input[name= "' +name +'"]').val(false);
    }
});

默认情况下，$('form').serializeArray()中不出现checkbox值，勾选时出现。

我们必须为每个复选框保留一个隐藏字段，例如：

<input type="hidden" value="false" name="Check1" />
<input type="hidden" value="false" name="Check2" />

现在当我们序列化表单时，我们会得到正确的值，例如：检查1=真检查2=假

【讨论】：

【解决方案4】：

<input type="checkbox" name="check1" value="true" id="check1">

只需设置值

【讨论】：

如果我们选中/取消选中复选框并且需要更多 js 工作，它不会得到更新

【解决方案5】：

您可以为复选框添加新类并在单击时设置值。

<input class="checkbox" id="someId" type="checkbox" value="false" />Checkbox

并使用一个小的 JQuery 助手

$('.checkbox').click(function () {
    $(this).val() == "false" ? $(this).val("true") : $(this).val("false");
});

然后就可以获取复选框的值或者序列化表单了。

【讨论】：