bugfix> javascript > 投稿

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

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

前もって感謝します。

回答 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>
    
    

あなたの答え