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


发布者 ourjs  发布时间 1507103636284
关键字 JS学习  JavaScript 
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










  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA