checkbox不选中不传值问题解决

前言

在使用layui时候,遇到个问题,我需要复选框选中传值传1,未选中的传0

<input type="checkbox" name="avatarUrl_header" lay-skin="primary" title="头像">

<input type="checkbox" name="nickName_header" lay-skin="primary" title="微信昵称">

如果你直接简单的这样拿，你会发现你只能拿到选中的参数

解决

方法一：

绑定事件，选中时赋值选中值给hidden input框

<input type="checkbox" name="avatarUrl_header" value="1" />

<input type="checkbox" name="avatarUrl_header" value="1" onclick="javascript:document.getElementById('test').value=this.checked;" />

<input type="hidden" id="test" name="test" value="false"/>

方法二：

根据W3C的规则未选中的checkbox和禁用的控件不是有效控件，不会被提交。但是可以在它之前定义一个同name名的hidden表单（注意先后顺序）。这种做法很巧妙。

比如:

<input type="hidden" name="foo" value="0">

<input type="checkbox" name="foo" id="foo" value="1">

当checkbox未选中的时候，提交的是hidden表单，值0就被提交到服务器了。

当checkbox选中的时候，hidden和checkbox表单都被提交了，但是因为它们的name是一样的，所以hidden的值被checkbox覆盖了。所以就得到了数值1。