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

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

checkbox的checked和value属性详解:

https://blog.csdn.net/kouryoushine/article/details/87984749

方法1:

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


<form action="test2.asp" method="post">

<input type="checkbox" name="chk1" value="1" />
<input type="checkbox" name="chk2" value="1" onclick="javascript:document.getElementById('hid').value=this.checked;" />
<input type="hidden" id="hid" name="hid1" value="false"/>
<input type="submit" value="提交" />
</form>

方法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

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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值