###実現したいこと
jQueryでチェックボックスのname属性の値とチェックされた値(今回チェックされたら1,チェックされてなかったら0)を別々にpostしたい
###該当のソースコード
HTML
1<html> 2 <head> 3 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 4 <script type="text/javascript" src="form.js"></script> 5 </head> 6 <body> 7 <form id="form" method="post"> 8 <input type="checkbox" name="ids[]" value="1" />check1 9 <input type="checkbox" name="ids[]" value="2" />check2 10 <input type="checkbox" name="ids[]" value="3" />check3 11 12 <input type="submit" name="submit" value="send" /> 13 </form> 14 </body> 15</html>
JavaScript
1$(function(){ 2 $("#form").submit(function(){ 3 //選択されたチェックボックスの値を配列に保存 4 var ids=[]; 5 $("[name='ids[]']:checked").each(function(){ 6 ids.push(this.value,Number(this.checked))); 7 8 }); 9 //console.log(ids); 10 11 $.ajax({ 12 type: "POST", 13 url: "form.php", 14 data: { 15 "ids":ids, 16 }, 17 success: function(data){ 18 if(data != '') { 19 alert(data); 20 } 21 } 22 }); 23 return false; //submitイベントハンドラにfalseを返し,action処理をキャンセル 24 }); 25});
PHP
1if (isset($_POST['ids'])) { 2 echo "チェックボックス\n"; 3 foreach($_POST['ids'] as $check) { 4 echo htmlspecialchars($check) . "が選択されました\n"; 5 } 6}
###発生している問題
上記ソースコードだと例えばcheck1をチェックした際
sendというsubmitボタンを押下後alertで 1が選択されました。 1が選択されました。
となります。
console.log(ids);
には
(2) ["1", 1] 0: "1" 1: 1 length: 2 ▶︎__proto__: Array(0)
と表示されます。
ここを ["1",1]
から["1"]
1
とチェックボックスのvalue属性の値とチェックボックスの1の値を別々のdataとしてajaxを用いphp側でpostされたかどうかを確認したいです。
そしてゴールとしてalertで 1が選択されました。 1がチェックされました
と表示させたいと思っています(チェックされましたというのはおかしいのですがチェックボックスがチェックされた1か0を参照したいと思っています)
###期待する動作をすると思っていたソースコード
JavaScript
1$(function(){ 2 $("#form").submit(function(){ 3 //選択されたチェックボックスの値を配列に保存 4 var ids=[]; 5 $("[name='ids[]']:checked").each(function(){ 6 ids.push(this.value); 7 }); 8 //console.log(ids); 9 10 //チェックされたかどうか(1,0)を変数checkedに代入したい 11 var checked =[]; 12 $("[name='ids[]']:checked").each(function(){ 13 ids.push(Number(this.checked)); 14 }); 15 //console.log(checked); 16 17 $.ajax({ 18 type: "POST", 19 url: "form.php", 20 data: { 21 "ids":ids, 22 "checked":checked 23 }, 24 success: function(data){ 25 if(data != '') { 26 alert(data); 27 } 28 } 29 }); 30 return false; //submitイベントハンドラにfalseを返し,action処理をキャンセル 31 }); 32}); 33
PHP
1if (isset($_POST['ids'])) { 2 echo "チェックボックス\n"; 3 foreach($_POST['ids'] as $check) { 4 echo htmlspecialchars($check) . "が選択されました\n"; 5 } 6} 7if (isset($_POST['checked'])) { 8 echo "チェックされたかどうか\n"; 9 echo htmlspecialchars($_POST['checked']) . "がチェックされました\n"; 10} 11
期待すると思っていたソースコードでは
console.log(ids);
["1"] 0: "1" 1: 1 length: 2 ▶︎__proto__: Array(0)
console.log(checked);
[] length: 0 ▶︎__proto__: Array(0)
となっており別々のデータとしてPOSTできたのかと思ったのですが
alertで 1が選択されました。 1が選択されました。
と表示されました。
$_POST['checked']
がNULLになってしまっているのでお教えいただきたいと思っています。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー