- ベストアンサー
複数のチェックボックス＆配列にランダムな数字
- PHP学習中のものですが、複数のチェックボックスをワンクリックですべて選択する方法を調べています。
- 現在わたしが扱っているチェックボックスには、sampla_check[3] のように規則性のない数字が入っているのです。このような場合、どのようにしたら「チェックボックスをすべて選択」する機能を実装できるでしょうか。
- javascriptの入門書でも購入して、自分で学習すべき範疇のことかと思いますが、今すぐ答えが必要なので、どなたかお助けいただけないでしょうか。
- Kazu_creator
- お礼率54% (65/120)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 JavaScriptはやっておいて損はないと思います。頑張ってください。 以下の動作でお望みのものになると思います。 全部を舐めるのは同じで以下の動作が追加されています。 引数にターゲットとなるエレメント名を追加し、どちらのボタンが押されたか判断する。 checkboxかつ指定されたターゲット名が含まれるエレメントだった場合は指定されたフラグでcheckedを変更する。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>複数のチェックボックス＆配列にランダムな数字</title> <script type="text/javascript"> function check ( target, isCheck ) { var max = document.form1.elements.length; for ( var i = 0; i < max; i ++ ) { var obj = document.form1.elements[i]; if ( obj.type == 'checkbox' && obj.name.indexOf(target) != -1 ) { obj.checked = isCheck; } } } </script> </head> <body> <form name="form1"> <input type="checkbox" name="sample_check[3]" value="true" /> 項目(3) <input type="checkbox" name="sample_check[7]" value="true" /> 項目(7) <input type="checkbox" name="sample_check[12]" value="true" /> 項目(12) <br /> <input type="checkbox" name="test_check[3]" value="true" /> 項目(3) <input type="checkbox" name="test_check[7]" value="true" /> 項目(7) <input type="checkbox" name="test_check[12]" value="true" /> 項目(12) </form> <button type="button" onclick="check('sample_check',true);">sample_全選択</button> <button type="button" onclick="check('sample_check',false);">sample_全解除</button> <br /> <button type="button" onclick="check('test_check',true);">test_全選択</button> <button type="button" onclick="check('test_check',false);">test_全解除</button> </body> </html>
その他の回答 (3)
- yambejp
- ベストアンサー率51% (3827/7415)
データの持たせ方がおかしいですね <INPUT TYPE="checkbox" NAME="sample_check[]" VALUE="3"> 項目(3) <INPUT TYPE="checkbox" NAME="sample_check[]" VALUE="7"> 項目(7) <INPUT TYPE="checkbox" NAME="sample_check[]" VALUE="12"> 項目(12) こうすれば同じ名前のオブジェクトとして処理できます
お礼
ご指摘ありがとうございます。 このチェックボックスを含むページを作ってから気づいたのですが、複数のチェックボックスの情報を配列で受け取る場合は、チェックされたところだけ要素として渡されるんですね。 当初は、10個チェックボックスがあって、そのうち3つチェックされていた場合、残りの7つも空白文字（またはNULL）の要素として渡されるのかと思ってました（なのでforeach($check_array as $key => $value)で$valueがTRUEのときだけSQLクエリを実行するようなことをしてました）。 やっぱり、この処理を修正するのが王道なんでしょうね。 数が多いので大変ですが、今後のためにも頑張ってやってみようかと思います。 （そもそもクラスとか使ってオブジェクト指向っぽく作っておけば、修正も一発だったのかもしれませんが、そこらへんはまだよくわからないのです）
- askaaska
- ベストアンサー率35% (1455/4149)
for (var i = 0; i < 31) { var o = document.getElementsByName("sample_check[i]").item(0); if (o) { o.checked = true; } } こんな感じでやってみてはどお？ var inputs = getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "checkbox" && inputs[i].name.indexOf("sample_check") == 0) { inputs[i].checked = true; } } こんなのでもいいと思う 動作確認はしていないのでエラーはゴメンね
お礼
ご回答ありがとうございます。 どの言語でもそうですが、解答は一つではないんですね。 自分でも常に3通りくらいの方法が思いつけるように勉強したいと思います。 勉強になりました。 ありがとうございます。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 以下のサンプルで確認しました。 理屈としてはform1の中にあるエレメントすべてを舐めて、checkboxだった場合、フラグに設定された真偽値をcheckedに設定します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>複数のチェックボックス＆配列にランダムな数字</title> <script type="text/javascript"> function check ( isCheck ) { var max = document.form1.elements.length; for ( var i = 0; i < max; i ++ ) { var obj = document.form1.elements[i]; if ( obj.type == 'checkbox' ) { obj.checked = isCheck; } } } </script> </head> <body> <form name="form1"> <input type="checkbox" name="sample_check[3]" value="true" /> 項目(3) <input type="checkbox" name="sample_check[7]" value="true" /> 項目(7) <input type="checkbox" name="sample_check[12]" value="true" /> 項目(12) </form> <button type="button" onclick="check(true);">全選択</button> <button type="button" onclick="check(false);">全解除</button> </body> </html>
補足
早速のご回答ありがとうございます！ なるほど。こういうやり方があるんですね！PHPの学習が一段落したら、次はやっぱりjavascriptだなという思いを新たにしました。 ところで、実は、同じページにチェックボックスが2種類ありまして、以下のような感じになっているのです。 こういうよう様な場合に、ボタンAを押したらsample_checkだけチェック、ボタンBを押したらtest_checkだけチェックのような処理をすることは可能でしょうか。 <td><input type="checkbox" name="sample_check[3]" value="true" /> 項目(3)</td> <td><input type="checkbox" name="sample_check[7]" value="true" /> 項目(7)</td> <td><input type="checkbox" name="sample_check[12]" value="true" /> 項目(12)</td> <td><input type="checkbox" name="test_check[3]" value="true" /> アイテム(3)</td> <td><input type="checkbox" name="test_check[7]" value="true" /> アイテム(7)</td> <td><input type="checkbox" name="test_check[12]" value="true" /> アイテム(12)</td> もちろん、1つのボタンで両方チェックされたとしても、nameの違うsubmitボタンを2つ用意して、submit_01が押されてPOSTした場合はsample_check[]の配列を読み、submit_02の場合はtest_check[]の配列を読むという処理もできると思いますが、できればどちらかだけ「すべてチェック」できればスマートだと思います。 お手数でなければ、いま少しご指導いただけないでしょうか。
お礼
丁寧な回答ありがとうございます！ 「 check('test_check',true)」とターゲット名指定したうえで「obj.name.indexOf(target) != -1」と判定するってことですよね。 javascriptについては何も知らないプログラミング初心者ですが、VBAとPHPをかじったので、教えてもらえばなんとなく、どういう処理をしているのか見当がつくようになりました。 すこしでも速くPHP & mySQLおぼえて、javascriptの学習に取り組めるようにしたいと思います。 ご指導ありがとうございました。