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

Posted 2021-10-02 Hello World,

(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(默认值);