给checkbox选择框设置不选中时的值

Checkbox 对象代表一个 HTML 表单中的一个选择框。

比如说有以下选择框

<form action="" method="post">
<input type="checkbox" name="cb1" value="1" />
<input type="checkbox" name="cb2" value="1" />
<input type="checkbox" name="cb3" value="1" />
</form>

当全部选中时，向后台post的值是

querystring: cb1=1&cb2=1&cb3=1
{ cb1: 1, cb2: 1, cb3: 1 }

当只选只前两个时，向后台post的数据是

querystring: cb1=1&cb2=2
{ cb1: 1, cb2: 1}

如何能让当没有选中的checkbox能发送0呢，比如说下面的：

querystring: cb1=1&cb2=1&cb3=0
{ cb1: 1, cb2: 1, cb3: 0}

最简单的做法是为每一个checkbox设置一个隐藏的默认值即可，当同名的checkbox有值时，相应的值将会被覆盖，否则将会发送hidden的值。

<form action="" method="post">
	<input type="hidden" name="cb1" value="0" />
	<input type="checkbox" name="cb1" value="1" />

	<input type="hidden" name="cb2" value="0" />
	<input type="checkbox" name="cb2" value="1" />

	<input type="hidden" name="cb3" value="0" />
	<input type="checkbox" name="cb3" value="1" />
</form>

注意此方法只对部分后端框架有效。比如PHP

querystring: cb1=0&cb1=1&cb2=0&cb2=1&cb3=0&cb3=0

//虽然前端发了两组后，很多后端框架会自动用后面的值合并其前面的值：
{ cb1: 1, cb2: 1, cb3: 0}

如果你使用ASP.NET MVC，可参考：https://stackoverflow.com/questions/7600817/how-to-submit-unchecked-checkbox-also

给checkbox选择框设置不选中时的值

开源的 OurJS

关注我们