jQuery API の serializeArray() は、フォーム要素のセットを、シリアライズするメソッド。フォーム要素のセットを、名前（name）と値（value）の配列としてエンコードする。
記述方法
jQuery( セレクター ) . serializeArray();
セレクターのセットを、シリアライズする。
記述例
jQuery( 'form' ) . serializeArray();
form要素のセットを、シリアライズする。
シリアライズ例
名前（name）と値（value）の配列としてエンコードする。
[
{
name: "name1",
value: "value1"
},
{
name: "name2",
value: "value2"
}
]
{
name: "name1",
value: "value1"
},
{
name: "name2",
value: "value2"
}
]
実装例（サンプル）
実装例（サンプル）の動作について
「シリアライズ」ボタンをクリックすると、フォーム要素のセットをシリアライズ、名前（name）と値（value）の配列としてエンコードする。配列から名前（name）と値（value）を取り出し、黄色のボックス要素内に表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery( '#jquery-sample-serializeArray' ) . html( '' );
array = new Array()
array = jQuery( '#jquery-sample form' ) . serializeArray();
jQuery . each( array, function( index, elements ){
jQuery( '#jquery-sample-serializeArray' ) . append( '<p>' + elements . name + ':' + elements . value + '</p>' );
} );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click(
function() {
jQuery( '#jquery-sample-serializeArray' ) . html( '' );
array = new Array()
array = jQuery( '#jquery-sample form' ) . serializeArray();
jQuery . each( array, function( index, elements ){
jQuery( '#jquery-sample-serializeArray' ) . append( '<p>' + elements . name + ':' + elements . value + '</p>' );
} );
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample label {
margin: 5px;
font-size: 15px;
color: #303030;
cursor: pointer;
}
#jquery-sample-serializeArray {
margin: 10px;
padding: 10px;
height: 120px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-sample label {
margin: 5px;
font-size: 15px;
color: #303030;
cursor: pointer;
}
#jquery-sample-serializeArray {
margin: 10px;
padding: 10px;
height: 120px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample">
<form>
<p>
jquerySmapleInput1：<input type="text" name="jquerySmapleInput1" value="input1" />
</p>
<p>
jquerySmapleInput2：<input type="text" name="jquerySmapleInput2" value="インプット2" />
</p>
<p>
Checkbox：
<label>
<input type="checkbox" name="jquerySmapleCheckbox1" checked="checked" />
jquerySmapleCheckbox1
</label>
<label>
<input type="checkbox" name="jquerySmapleCheckbox2" />
jquerySmapleCheckbox2
</label>
</p>
</form>
<p>
<button id="jquery-sample-button">シリアライズ</button>
</p>
<div id="jquery-sample-serializeArray"></div>
</div>
<form>
<p>
jquerySmapleInput1：<input type="text" name="jquerySmapleInput1" value="input1" />
</p>
<p>
jquerySmapleInput2：<input type="text" name="jquerySmapleInput2" value="インプット2" />
</p>
<p>
Checkbox：
<label>
<input type="checkbox" name="jquerySmapleCheckbox1" checked="checked" />
jquerySmapleCheckbox1
</label>
<label>
<input type="checkbox" name="jquerySmapleCheckbox2" />
jquerySmapleCheckbox2
</label>
</p>
</form>
<p>
<button id="jquery-sample-button">シリアライズ</button>
</p>
<div id="jquery-sample-serializeArray"></div>
</div>