serializeObject javascript関数がチェックボックスの値を取得しない

bugfix> javascript > 投稿 2020-08-22 17:18

フォームをシリアル化するために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;
};

チェックボックスがチェックされているかどうかにかかわらず、この関数がチェックボックスの値を取得できるようにするにはどうすればよいですか？

前もって感謝します。

javascript

回答 1 件

チェックボックスの値プロパティには常に真の値が設定されます。同様に 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>
```

Trends

bugfix

serializeObject javascript関数がチェックボックスの値を取得しない

javascript

関連記事