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

Get proper checkbox value using form.serialize

本文关键字：复选框 form serialize 获取 使用      更新时间：2023-09-26

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

这将返回任何复选框值为"开"或"关"。

有没有任何方法可以使用相同的方法获得1/0或true/false值？

是。您可以添加一个与复选框同名的隐藏输入，如果复选框未选中，将提交该值：

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

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

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

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

只能选中一个，并且只有选中的名称/值才会发送到服务器。

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

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

我们必须绑定这些复选框的change事件，并将其值设置为true或false。

 $('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（）中，它在选中时显示。

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

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

现在，当我们现在序列化表单时，我们会得到正确的值，如：Check1=真Check2=错误

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

只需设置值

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

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

并使用小型JQuery助手

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

然后，您将能够获得复选框的值或序列化表单。

相关文章：