将checkbox未选中将设置为指定值并系列化,解决checkbox未选中不传递值问题

41 篇文章 0 订阅
20 篇文章 0 订阅
(function ($) {
    
    //将checkbox未选中将设置为指定值并系列化
    jQuery.fn.extend({
        serializeWithCheckbox: function (uncheckedValue) {
            return jQuery.param(this.serializeArrayWithCheckbox(uncheckedValue));
        },
        serializeArrayWithCheckbox: function (uncheckedValue) {
            var
                rCRLF = /\r?\n/g,
                rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
                rsubmittable = /^(?:input|select|textarea|keygen)/i,
                rcheckableType = (/^(?:radio)$/i);  //仅将radio设置为不发送未选中项

            //未指定的转换为false
            if (uncheckedValue == undefined)
                uncheckedValue = 'false'
            uncheckedValue = uncheckedValue + '';//转字符串

            return this.map(function () {

                // Can add propHook for "elements" to filter or add form elements
                var elements = jQuery.prop(this, "elements");
                return elements ? jQuery.makeArray(elements) : this;
            })
                .filter(function () {
                    var type = this.type;

                    // Use .is( ":disabled" ) so that fieldset[disabled] works
                    return this.name && !jQuery(this).is(":disabled") &&
                        rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) &&
                        (this.checked || !rcheckableType.test(type));
                })
                .map(function (_i, elem) {
                    var val = jQuery(this).val();

                    if (val == null) {
                        return null;
                    }
                    //将未勾选的checkbox值设置为指定值
                    if (this.type == 'checkbox' && this.checked == false)
                        val = uncheckedValue;

                    if (Array.isArray(val)) {
                        return jQuery.map(val, function (val) {
                            return { name: elem.name, value: val.replace(rCRLF, "\r\n") };
                        });
                    }

                    return { name: elem.name, value: val.replace(rCRLF, "\r\n") };
                }).get();
        }
    });
})(jQuery);

因表单默认不会提交未选中的checkbox,通常的做法是生成一个隐藏的input,当未选中时设置为某个值,但操作比较麻烦,jQuery系列化时也是根据表单的行为来处理的。实际情况可能需要提交未选中的值并设置为某个特定的内容。这段代码增加了一个serializeWithCheckbox函数,用于处理此问题。

调用方法:$('#formid或者其他选择器').serializeWithCheckbox(默认值);

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hello World,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值