フォーム書式設定プラグイン jquery.serializeJSON

<form id="my-profile">
    <!-- simple attribute -->
    <input type="text" name="fullName"              value="Mario Izquierdo" />
 
    <!-- nested attributes -->
    <input type="text" name="address[city]"         value="San Francisco" />
    <input type="text" name="address[state][name]"  value="California" />
    <input type="text" name="address[state][abbr]"  value="CA" />
 
    <!-- array -->
    <input type="text" name="jobbies[]"             value="code" />
    <input type="text" name="jobbies[]"             value="climbing" />
 
    <!-- textareas, checkboxes ... -->
    <textarea              name="projects[0][name]">serializeJSON</textarea>
    <textarea              name="projects[0][language]">javascript</textarea>
    <input type="hidden"   name="projects[0][popular]" value="0" />
    <input type="checkbox" name="projects[0][popular]" value="1" checked />
 
    <textarea              name="projects[1][name]">tinytest.js</textarea>
    <textarea              name="projects[1][language]">javascript</textarea>
    <input type="hidden"   name="projects[1][popular]" value="0" />
    <input type="checkbox" name="projects[1][popular]" value="1"/>
 
    <!-- select -->
    <select name="selectOne">
        <option value="paper">Paper</option>
        <option value="rock" selected>Rock</option>
        <option value="scissors">Scissors</option>
    </select>
 
    <!-- select multiple options, just name it as an array[] -->
    <select multiple name="selectMultiple[]">
        <option value="red"  selected>Red</option>
        <option value="blue" selected>Blue</option>
        <option value="yellow">Yellow</option>
    </select>
</form>

$('#my-profile').serializeJSON(); 
// returns =>{
    fullName: "Mario Izquierdo",
 
    address: {
    city: "San Francisco",
    state: {
        name: "California",
        abbr: "CA"}
    },
 
    jobbies: ["code", "climbing"],
 
    projects: {'0': { name: "serializeJSON", language: "javascript", popular: "1" },'1': { name: "tinytest.js?1.1.10",   language: "javascript", popular: "0" }
    },
 
    selectOne: "rock",
    selectMultiple: ["red", "blue"]
}

<form>
    <input type="text" name="notype"           value="default type is :string"/>
    <input type="text" name="string:string"    value=":string type overrides parsing options"/>
    <input type="text" name="excluded:skip"    value="Use :skip to not include this field in the result"/>
 
    <input type="text" name="number[1]:number"           value="1"/>
    <input type="text" name="number[1.1]:number"         value="1.1"/>
    <input type="text" name="number[other stuff]:number" value="other stuff"/>
 
    <input type="text" name="boolean[true]:boolean"      value="true"/>
    <input type="text" name="boolean[false]:boolean"     value="false"/>
    <input type="text" name="boolean[0]:boolean"         value="0"/>
 
    <input type="text" name="null[null]:null"            value="null"/>
    <input type="text" name="null[other stuff]:null"     value="other stuff"/>
 
    <input type="text" name="auto[string]:auto"          value="text with stuff"/>
    <input type="text" name="auto[0]:auto"               value="0"/>
    <input type="text" name="auto[1]:auto"               value="1"/>
    <input type="text" name="auto[true]:auto"            value="true"/>
    <input type="text" name="auto[false]:auto"           value="false"/>
    <input type="text" name="auto[null]:auto"            value="null"/>
    <input type="text" name="auto[list]:auto"            value="[1, 2, 3]"/>
 
    <input type="text" name="array[empty]:array"         value="[]"/>
    <input type="text" name="array[list]:array"          value="[1, 2, 3]"/>
 
    <input type="text" name="object[empty]:object"       value="{}"/>
    <input type="text" name="object[dict]:object"        value=&#39;{"my": "stuff"}&#39;/>
</form>

$('form').serializeJSON(); 
// returns =>{"notype": "default type is :string","string": ":string type overrides parsing options",// :skip type removes the field from the output"number": {"1": 1,"1.1": 1.1,"other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number)    },"boolean": {"true": true,"false": false,"0": false, // <-- "false", "null", "undefined", "", "0" parse as false    },"null": {"null": null, // <-- "false", "null", "undefined", "", "0" parse as null"other stuff": "other stuff"},"auto": { // works as the parseAll option"string": "text with stuff","0": 0,         // <-- parsed as number"1": 1,         // <-- parsed as number"true": true,   // <-- parsed as boolean"false": false, // <-- parsed as boolean"null": null,   // <-- parsed as null"list": "[1, 2, 3]" // <-- array and object types are not auto-parsed    },"array": { // <-- works using JSON.parse"empty": [],"not empty": [1,2,3]
    },"object": { // <-- works using JSON.parse"empty": {},"not empty": {"my": "stuff"}
    }
}

<form>
  <input type="checkbox" name="check1" value="true" checked/>
  <input type="checkbox" name="check2" value="true"/>
  <input type="checkbox" name="check3" value="true"/>
</form>

$('form').serializeJSON(); 
// returns =>{'check1': 'true'} // Note that check2 and check3 are not included because they are not checked

$('form').serializeJSON({checkboxUncheckedValue: "false"}); 
// returns =>{'check1': 'true', check2: 'false', check3: 'false'}