質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

981閲覧

jQuery チェックボックスのvalue属性の値とチェックされた値を別々にajaxでPOSTをしたい

yuuuui

総合スコア59

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/17 10:34

編集2017/06/18 11:52

###実現したいこと
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になってしまっているのでお教えいただきたいと思っています。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi_ue

2017/06/18 08:57

ちょっと言っている意味が分かりません。どんな場合にどんな出力を期待しているか、書いた方が分かりやすいと思います。
yuuuui

2017/06/18 11:14

コメントありがとうございます。すみません。修正します。
guest

回答1

0

ベストアンサー

まだ、ちょっと分からないです・・・

javascript

1$("[name='ids[]']:checked").each(function(){ 2 ids.push(this.value); 3}); 4```と、ここでチェックされているものだけのデータを作ってますから、POSTされるのはチェックされたものだけです。 5なので、 6```javascript 7$(function(){ 8 $("#form").submit(function(){ 9 //選択されたチェックボックスの値を配列に保存 10 var ids=[]; 11 $("[name='ids[]']:checked").each(function(){ 12 ids.push(this.value); 13 }); 14 15 $.ajax({ 16 type: "POST", 17 url: "form.php", 18 data: { 19 "ids":ids 20 }, 21 success: function(data){ 22 if(data != '') { 23 alert(data); 24 } 25 } 26 }); 27 return false; 28 }); 29});

php

1if (isset($_POST['ids'])) { 2 echo "チェックボックス\n"; 3 foreach($_POST['ids'] as $check) { 4 echo htmlspecialchars($check) . "が選択されました\n"; 5 } 6 echo "チェックされたかどうか\n"; 7 echo "チェックされました\n"; 8} 9```でいいのでは? 10やっぱり何がやりたいかさっぱりわかりません。

投稿2017/06/18 15:02

shi_ue

総合スコア4437

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuuuui

2017/06/18 15:23

ありがとうございました。ajaxを使用するのもjQueryも初めてだったので idとチェックボックスにチェックした値を別々にPOSTしないといけないのかと頭が固くなってしまっていました。 > ここでチェックされているものだけのデータを作ってますから、POSTされるのはチェックされたものだけです その通りですよね・・・ありがとうございました。 ベストアンサーとさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問