
解决checkbox未选中不传递value的多种方法
发布日期:2021-05-06 19:51:15
浏览次数:8
分类:技术文章
本文共 2234 字,大约阅读时间需要 7 分钟。
如题,包含了网上很多高手的智慧结晶,最后也放上了我改良后的版本,适用自己的项目。
直接copy代码可能有很多问题,只有理解了原理才能应对各种变化和问题,把知识掌握了。
checkbox的checked和value属性详解:
方法1:
//验证表单正确性 function checkForm() { var t1 = document.getElementById("enterPenal").getElementsByTagName("input"); for(i=0;i
方法2
方法3
根据W3C的规则未选中的checkbox和禁用的控件不是有效控件,不会被POST。因此如果要未选中的checkbox表示值0的话,就不得不曲线完成了。最近研究Zend Framework时候,发现其中的一个方法formCheckbox()。这个方法是生成checkbox表单的。但是它在生成checkbox的之前会生成一个hidden表单。这种做法很巧妙。比如:生成这样的表单,当checkbox未选中的时候,提交的是hidden表单。值0就被提交到服务器了。当checkbox都选中的时候,hidden和checkbox表单都被提交了,但是因为它们的name是一样的,所以hidden的值被checkbox覆盖了。所以就得到了数值1。这种方法简单巧妙,值得推广。经测试,在PHP中,如果有多个name相同的表单,post到服务器,后台仅取最后一个表单的值。而在ASP.NET中,会把这个多个表单的值合并成逗号分割的值。因此,这种方法用在PHP下更合适。
jquery serialize()方法时如何处理表单(我遇到的场景)
//为jquery.serializeArray()解决radio,checkbox未选中时没有序列化的问题 $.fn.ghostsf_serialize = function () { var a = this.serializeArray(); var $radio = $('input[type=radio],input[type=checkbox]', this); var temp = {}; $.each($radio, function () { if (!temp.hasOwnProperty(this.name)) { if ($("input[name='" + this.name + "']:checked").length == 0) { temp[this.name] = ""; a.push({name: this.name, value: ""}); } } }); //console.log(a); return jQuery.param(a); }; $(form).ghostsf_serialize()
改良注释版,由于感觉上面写的有点啰嗦,所以简单化了一些。有问题请指出
思路:
1,序列化表单存放在temp中。未checked的表单元素,不包含在内。 2,获取未checked的所有表单元素集合。 3,遍历未checked表单元素集合,把value设置成0或任意值,添加到temp中 4,提交表单,此时表单包含了未checked和checked的所有元素。有疑惑的参考我的上一篇博客。
$.fn.radio_serialize = function () { var temp = this.serializeArray(); //序列化表单,没有checked的表单不包含在对象中。 var $notchecked_obj = $('input[type=radio]:not(:checked),input[type=checkbox]:not(:checked)', this);//获取所有未checked的raido和checkbox标签。 $.each($notchecked_obj, function () { //遍历未被选中的标签 if (!temp.hasOwnProperty(this.name)) { //如果temp中不包含该标签 alert(this.name); temp.push({name: this.name, value: "0"}); //把unchecked标签name=原始值,value=0。这里大家可以自定义未选中的值。 } }); alert(temp); return jQuery.param(temp);//序列化一个 key/value 对象: };
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2025年03月25日 03时22分40秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Dubbo架构设计详解
2019-03-03
如何锻炼JAVA编程思路?
2019-03-03
Mybatis源码分析(四):属性接口之objectFactory
2019-03-03
全面了解 Nginx 主要应用场景
2019-03-03
【系统日志】log4j配置学习总结
2019-03-03
2019年1月已到,Java 8 要收费了吗?
2019-03-03
最全的spring面试题和答案
2019-03-03
CentOS 8 已下载ntpdate 却无法使用crond进行时间同步
2019-03-03
坑啊,Spring的BeanUtils是这样用的,为啥会出bug?
2019-03-03
Mybatis的这些坑!把我坑惨了!
2019-03-03
在 IntelliJ IDEA 中使用 Git,太方便了!
2019-03-03
一个女生不主动联系你还有机会吗?
2019-03-03
7 个显著提升编码效率的IntelliJ IDEA必备插件
2019-03-03
企业API接口设计之token、timestamp、sign具体实现
2019-03-03
不懂别瞎搞!Redis 性能优化的 13 条军规!
2019-03-03
卸载 Navicat!事实已证明,正版客户端,它更牛逼……
2019-03-03
想彻底了解maven,有这篇文章足够了(中)
2019-03-03
Intellij IDEA 一些让人爱不释手的小技巧
2019-03-03
idea连接服务器远程调试(Dockerfile版)
2019-03-03
ElasicJob分布式定时任务
2019-03-03