Question

我使用了一个javascript函数'serializeObject'来序列化表单，如果未选中该复选框，则此函数无法获取复选框的值。

HTML：

<input value="0" name="test" style="display: none;" type="checkbox">

Javscript：

jQuery.fn.serializeObject = function() {

var self = this,
    json = {},
    push_counters = {},
    patterns = {
        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
        "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
        "push":     /^$/,
        "fixed":    /^\d+$/,
        "named":    /^[a-zA-Z0-9_]+$/
    };


this.build = function(base, key, value){
    base[key] = value;
    return base;
};

this.push_counter = function(key){
    if(push_counters[key] === undefined){
        push_counters[key] = 0;
    }
    return push_counters[key]++;
};

jQuery.each(jQuery(this).serializeArray(), function() {

    // skip invalid keys
    if(!patterns.validate.test(this.name)){
        return;
    }

    var k,
        keys = this.name.match(patterns.key),
        merge = this.value,
        reverse_key = this.name;

    while((k = keys.pop()) !== undefined){

        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

        if(k.match(patterns.push)){
            merge = self.build([], self.push_counter(reverse_key), merge);
        }

        else if(k.match(patterns.fixed)){
            merge = self.build([], k, merge);
        }

        else if(k.match(patterns.named)){
            merge = self.build({}, k, merge);
        }
    }

    json = jQuery.extend(true, json, merge);
});

return json;
};

如果选中复选框，如何允许此函数获取复选框的值？

提前致谢。

Answer 1

复选框的value属性始终具有真值。同样，输入type=radio。如果输入属于这些类型之一，则需要检查checked属性。

您还必须考虑使用option:selected的选择框。

Jquery轮胎简化了这一系列功能。

我无法解决您的功能（如果您可以通过代码段，jsfiddle或codepen提供运行示例，那么您可能会有更好的运气）。但是波纹管代码可能会有所启发。请注意.value如何始终返回字符串，但.checked属性为true / false，具体取决于选择。

let input = document.querySelectorAll('input[type=checkbox]')

console.log(input[0].value)
// "Bike"
console.log(input[1].value)
// "Car"

console.log(input[0].checked)
// false
console.log(input[1].checked)
// true

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

serializeObject javascript函数没有得到复选框的值

1 个答案: