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

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

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

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

jQuery

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

HTML

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

Q&A

3回答

1583閲覧

複数の画像チェックボックスのデーターをPHPで受け取る

d__..___

総合スコア18

PHP

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2019/06/30 15:31

前提・実現したいこと

jQuryで画像のチェックボックスを作成し、画像をチェック入れたらPHP側でデーターを受け取りたい
https://remotestance.com/blog/2809/
こちらのURLを参考に複数の画像をクリックしてデーターを受け取れるようにしたのですが、チェックを入れてないのにデーターが送信されてしまう

発生している問題・エラーメッセージ

画像にチェック入れてもいれなくても img:foo1.png img:foo2.png img:foo3.png と出力されてしまう。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="robots" content="noindex" /> 6 <link rel="stylesheet" href="./style.css" /> 7 </head> 8 <body> 9 <div id="main"> 10 <ul class="image_list"> 11 <form action="./image.php" method="POST"> 12 <li> 13 <div class="image_box"> 14 <img class="thumbnail" src="./foo1.png" alt="foo" /> 15 <!-- phase2 --> 16 <input class="disabled_checkbox" type="checkbox" name="img[]"value="foo1.png" checked /> 17 </div> 18 </li> 19 <li> 20 <div class="image_box"> 21 <img class="thumbnail" src="./foo2.png" alt="foo" /> 22 <!-- phase2 --> 23 <input class="disabled_checkbox" type="checkbox" name="img[]" value="foo2.png" checked /> 24 </div> 25 </li> 26 <li> 27 <div class="image_box"> 28 <img class="thumbnail" src="./foo3.png" alt="foo" /> 29 <!-- phase2 --> 30 <input class="disabled_checkbox" type="checkbox" name="img[]" value="foo3.png" checked /> 31 </div> 32 </li> 33 34 <input type="submit" value="送信"> 35 </form> 36 </ul> 37 </div> 38 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 39 <script src="./base2.js"></script> 40 </body> 41</html> 42

PHP

1<?php 2$img = $_POST['img']; 3if($img == "") exit("画像を選択してください。"); 4foreach ($img as $imgNO => $value){ 5echo "img:{$value}<br />"; 6 7} 8?>

jQuery

1 2$(function() { 3 // チェックボックスのクリックを無効化します。 4 $('.image_box .disabled_checkbox').click(function() { 5 return false; 6 }); 7 8 // 画像がクリックされた時の処理です。 9 $('img.thumbnail').on('click', function() { 10 if (!$(this).is('.checked')) { 11 // チェックが入っていない画像をクリックした場合、チェックを入れます。 12 $(this).addClass('checked'); 13 } else { 14 // チェックが入っている画像をクリックした場合、チェックを入外します。 15 $(this).removeClass('checked') 16 } 17 }); 18}); 19 20

試したこと

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2019/06/30 21:58

checked が入っていますが「全部はずしても」ということでしょうか。 またこの作りだと画像データそのものではなくあくまで文字列を送信しているに過ぎないように見えます。 仰っている「データー」とは文字列を想定されているのでしょうか?
d__..___

2019/06/30 23:20

文字列のことです! 画像を左からfoo1.png foo2.png foo3.png とします。 foo1.pngをクリックしたときは img:foo1.png と表示され foo1.png とfoo2.pngをクリックしたときは img:foo1.png img:foo2.png と表示するようにしたいです。 現在の症状: https://gfycat.com/eachkeyadouri
m.ts10806

2019/07/01 00:04

ちなみに質問は編集できます。 コメント欄はデフォルト非表示ですし「質問への追記・修正の依頼」なので、 基本的には質問を編集して返してください。
guest

回答3

0

画像をクリックしてチェックボックスのチェックをかえるならlabelで囲むのが
手っ取り早い(idを指定して切り替える方法もあります)

PHP

1<?PHP 2$img=filter_input(INPUT_POST,"img",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); 3print_r($img); 4?> 5<div id="main"> 6<form method="POST"> 7<ul class="image_list"> 8<li> 9<div class="image_box"> 10<label> 11<img class="thumbnail" src="./foo1.png" alt="foo1" /> 12<input class="disabled_checkbox" type="checkbox" name="img[]"value="foo1.png" checked /> 13</label> 14</div> 15</li> 16<li> 17<div class="image_box"> 18<label> 19<img class="thumbnail" src="./foo2.png" alt="foo2" /> 20<input class="disabled_checkbox" type="checkbox" name="img[]" value="foo2.png" checked /> 21</label> 22</div> 23</li> 24<li> 25<label> 26<div class="image_box"> 27<img class="thumbnail" src="./foo3.png" alt="foo3" /> 28<input class="disabled_checkbox" type="checkbox" name="img[]" value="foo3.png" checked /> 29</label> 30</div> 31</li> 32 33<input type="submit" value="送信"> 34</ul> 35</form> 36</div> 37

投稿2019/07/01 00:27

yambejp

総合スコア114572

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

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

0

>クラスだけでなくchecked属性もon,off切り替えてください。

どのようなjQueryコードを書けばよいか、教えてください。

投稿2019/06/30 23:49

d__..___

総合スコア18

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

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

m.ts10806

2019/07/01 00:03

回答ではなく回答にコメントをつけてください。 こちらの回答は削除依頼をしておいてください。
guest

0

画像offにして画面の動きを見たら分かりそうな気がします。

js

1 if (!$(this).is('.checked')) { 2 // チェックが入っていない画像をクリックした場合、チェックを入れます。 3 $(this).addClass('checked'); 4 } else { 5 // チェックが入っている画像をクリックした場合、チェックを入外します。 6 $(this).removeClass('checked') 7 }

結局送信されるのは「checkboxのチェックされているもの」なのでclassを付けはずししたところで
デフォルトで入っているchecked属性はそのままです。
クラスだけでなくchecked属性もon,off切り替えてください。
むしろデフォルトでchecked属性を入れておく必要ないのでは?

追記:
属性の切り替えは色々ありますが、checkedのつけはずし一般的なのはpropを使ったやり方

※[チェックボックス 切り替え]だけ検索しても出てきます。

ただ、現在のコードの問題点は[.thumbnailのclickイベント]を拾っていてその[this]を利用しているため、
あくまで画像だけに影響を与えています。
兄弟要素から(位置関係が決まっているならprev()でも行けそうですが
)
チェックボックスを指定してprop()すると良いのではないでしょうか。

投稿2019/06/30 23:26

編集2019/07/01 00:10
m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問