OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1507103636284
注意 转载须保留原文链接,译文链接,作者译者等信息。  
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


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 你用什么代码编辑工具开发JavaScript?
  3. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  4. 40行JavaScript代码实现的3D旋转魔方动画效果
  5. 使用Javascript将相对路径地址转换为绝对路径
  6. 给checkbox选择框设置不选中时的值
  7. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  8. JavaScript中怪异的地方
  9. 在JavaScript中创建命名空间的几种写法
  10. JavaScript中的继承,构造函数以及new关键字的作用

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号