博客
关于我
解决checkbox未选中不传递value的多种方法
阅读量:290 次
发布时间:2019-03-03

本文共 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 对象:        };

转载地址:http://jgtm.baihongyu.com/

你可能感兴趣的文章
不懂别瞎搞!Redis 性能优化的 13 条军规!
查看>>
卸载 Navicat!事实已证明,正版客户端,它更牛逼……
查看>>
想彻底了解maven,有这篇文章足够了(中)
查看>>
Intellij IDEA 一些让人爱不释手的小技巧
查看>>
idea连接服务器远程调试(Dockerfile版)
查看>>
ElasicJob分布式定时任务
查看>>
feign调用上传文件接口(MultipartFile)
查看>>
centos 文件格式不对执行报错 || centos查看或者修改文件格式
查看>>
win锁屏界面用户名修改
查看>>
Java设计模式 —— 桥接模式(Bridge)
查看>>
计算机三级 信息安全技术历年真题(二)总共十套 3月底之前更完
查看>>
计算机三级 信息安全技术历年真题(四)总共十套 3月底之前更完
查看>>
详解: 最小生成树
查看>>
[编程题]:n头牛中选择满足所有m种特性的牛(百度2021)
查看>>
Redis中的删除策略和逐出算法
查看>>
Redis的持久化策略RDB和AOF
查看>>
[数据结构]:红黑树(二)
查看>>
Ubuntu切换到root用户无法找到环境变量PATH的问题
查看>>
Python基础(二)
查看>>
PyCharm安装与配置
查看>>