jQueryのAjaxを使って複数選択されたチェックボックスの値をPOSTする方法メモ
html側で複数選択されたチェックボックスの値を送信するには
チェックボックスのname属性をname="xxx[]"のように配列にする必要がある。
<input type="checkbox" name="check[]" value="1" /> <input type="checkbox" name="check[]" value="2" />
jQuery側ではチェック済みの値をeach文を使って配列に保存していく。
var checks=[];
$("[name='check[]']:checked").each(function(){
checks.push(this.value);
});以下サンプル
選択した要素の値がalertで表示される
form.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form id="form" method="post">
<input type="checkbox" name="check[]" value="1" />check1
<input type="checkbox" name="check[]" value="2" />check2
<input type="checkbox" name="check[]" value="3" />check3
<select id="select" name="select">
<option value="1">select1</option>
<option value="2">select2</option>
</select>
<input type="submit" name="submit" value="send" />
</form>
</body>
</html>
form.js
$(function(){
$("#form").submit(function(){
//選択されたチェックボックスの値を配列に保存
var checks=[];
$("[name='check[]']:checked").each(function(){
checks.push(this.value);
});
//セレクトボックスの値を変数に保存
var select = $("#select").val();
$.ajax({
type: "POST",
url: "form.php",
data: {
"checks":checks,
"select":select
},
success: function(data){
if(data != '') {
alert(data);
}
}
});
return false; //submitイベントハンドラにfalseを返し，action処理をキャンセル
});
});
form.php
<?php
if (isset($_POST['checks'])) {
echo "チェックボックス\n";
foreach($_POST['checks'] as $check) {
echo htmlspecialchars($check) . "が選択されました\n";
}
}
if (isset($_POST['select'])) {
echo "セレクトボックスボックス\n";
echo htmlspecialchars($_POST['select']) . "が選択されました\n";
}
