解决checkbox未选中不传递value的多种方法

左手的ㄟ右手 2022-03-15 01:00 545阅读 0赞

> 如题，包含了网上很多高手的智慧结晶，最后也放上了我改良后的版本，适用自己的项目。  
> 直接copy代码可能有很多问题，只有理解了原理才能应对各种变化和问题，把知识掌握了。

### checkbox的checked和value属性详解： ###

[https://blog.csdn.net/kouryoushine/article/details/87984749][https_blog.csdn.net_kouryoushine_article_details_87984749]

### 方法1： ###

[https://blog.csdn.net/xyanghomepage/article/details/37562179][https_blog.csdn.net_xyanghomepage_article_details_37562179]

//验证表单正确性
        function checkForm()
        {
               var t1 = document.getElementById("enterPenal").getElementsByTagName("input");
               for(i=0;i<t1.length;i++)
               {
                   if(t1[i].type == "checkbox")
                   {
                       if(!(t1[i].checked))
                       {
                           t1[i].checked = true;
                           t1[i].value = "0";
                       }
                   }
               }
               return true;
        }
    ###jquery
     function checkForm() 
    {   
    alert(($("#checkbox").get(0).checked));
     
            if(!($("#checkbox").get(0).checked)) 
             { 
                 $("#checkbox").get(0).checked = true; 
                 $("#checkbox").get(0).value = "0"; 
              }
           $("#form").submit();
    }

### 方法2 ###

### 方法3 ###

根据W3C的规则未选中的checkbox和禁用的控件不是有效控件，不会被POST。因此如果要未选中的checkbox表示值0的话，就不得不曲线完成了。
    最近研究Zend Framework时候，发现其中的一个方法formCheckbox()。这个方法是生成checkbox表单的。但是它在生成checkbox的之前会生成一个hidden表单。这种做法很巧妙。
    比如:
    <input type="hidden" name="foo" value="0">
    <input type="checkbox" name="foo" id="foo" value="1">
    生成这样的表单，当checkbox未选中的时候，提交的是hidden表单。值0就被提交到服务器了。
    当checkbox都选中的时候，hidden和checkbox表单都被提交了，但是因为它们的name是一样的，所以hidden的值被checkbox覆盖了。所以就得到了数值1。
    这种方法简单巧妙，值得推广。
    
    经测试，在PHP中，如果有多个name相同的表单，post到服务器，后台仅取最后一个表单的值。而在ASP.NET中，会把这个多个表单的值合并成逗号分割的值。因此，这种方法用在PHP下更合适。

[https://www.cnblogs.com/opel/p/10097919.html][https_www.cnblogs.com_opel_p_10097919.html]

### 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 对象：
            };

[https://www.cnblogs.com/tangge/p/6554891.html][https_www.cnblogs.com_tangge_p_6554891.html]

[https_blog.csdn.net_kouryoushine_article_details_87984749]: https://blog.csdn.net/kouryoushine/article/details/87984749
[https_blog.csdn.net_xyanghomepage_article_details_37562179]: https://blog.csdn.net/xyanghomepage/article/details/37562179
[https_www.cnblogs.com_opel_p_10097919.html]: https://www.cnblogs.com/opel/p/10097919.html
[https_www.cnblogs.com_tangge_p_6554891.html]: https://www.cnblogs.com/tangge/p/6554891.html