複数のチェックボックス＆配列にランダムな数字

解決済

質問者：Kazu_creator
質問日時：2012/01/28 13:36
回答数：4件

こんにちは。PHP学習中のものですが、今回はこちらで質問させていただきます。

現在、複数のチェックボックスをワンクリックですべて選択する方法を調べています。
チェックボックスのNAMEがすべて同じ場合は、ちょっと検索すれば、すぐにサンプルスクリプトがたくさんヒットします。

複数選択可能なチェックボックスの場合も、document.form1.elements["sample_check[]"] というような記述で、チェックボックスの数がカウントできるということまでは判りました。

しかし、現在わたしが扱っているチェックボックス（下記をご参照ください）には、sampla_check[3] のように規則性のない数字が入っているのです。
（この数字を送信先で受けて、それをもとにmySQLのデータを更新するので省略できません）

このような場合、どのようにしたら「チェックボックスをすべて選択」する機能を実装できるでしょうか。

本来、javascriptの入門書でも購入して、自分で学習すべき範疇のことかと思いますが、今すぐ答えが必要なので、どなたかお助けいただけないでしょうか。

<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)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2012/01/28 17:29

こんにちは。

JavaScriptはやっておいて損はないと思います。頑張ってください。
以下の動作でお望みのものになると思います。

全部を舐めるのは同じで以下の動作が追加されています。
引数にターゲットとなるエレメント名を追加し、どちらのボタンが押されたか判断する。
checkboxかつ指定されたターゲット名が含まれるエレメントだった場合は指定されたフラグでcheckedを変更する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>

- 0
- 件

通報する

この回答へのお礼

丁寧な回答ありがとうございます！

「 check('test_check',true)」とターゲット名指定したうえで「obj.name.indexOf(target) != -1」と判定するってことですよね。

javascriptについては何も知らないプログラミング初心者ですが、VBAとPHPをかじったので、教えてもらえばなんとなく、どういう処理をしているのか見当がつくようになりました。

すこしでも速くPHP & mySQLおぼえて、javascriptの学習に取り組めるようにしたいと思います。
ご指導ありがとうございました。

通報する

お礼日時：2012/01/28 22:17

No.4

回答者： yambejp
回答日時：2012/01/28 17:41

データの持たせ方がおかしいですね

<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)

こうすれば同じ名前のオブジェクトとして処理できます

- 0
- 件

通報する

この回答へのお礼

ご指摘ありがとうございます。

このチェックボックスを含むページを作ってから気づいたのですが、複数のチェックボックスの情報を配列で受け取る場合は、チェックされたところだけ要素として渡されるんですね。

当初は、10個チェックボックスがあって、そのうち3つチェックされていた場合、残りの7つも空白文字（またはNULL）の要素として渡されるのかと思ってました（なのでforeach($check_array as $key => $value)で$valueがTRUEのときだけSQLクエリを実行するようなことをしてました）。

やっぱり、この処理を修正するのが王道なんでしょうね。
数が多いので大変ですが、今後のためにも頑張ってやってみようかと思います。
（そもそもクラスとか使ってオブジェクト指向っぽく作っておけば、修正も一発だったのかもしれませんが、そこらへんはまだよくわからないのです）

通報する

お礼日時：2012/01/28 22:33

No.2

回答者： askaaska
回答日時：2012/01/28 14:58

for (var i = 0; i < 31) {

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

どの言語でもそうですが、解答は一つではないんですね。
自分でも常に3通りくらいの方法が思いつけるように勉強したいと思います。

勉強になりました。
ありがとうございます。

通報する

お礼日時：2012/01/28 22:04

No.1

回答者： LancerVII
回答日時：2012/01/28 14:49

こんにちは。

以下のサンプルで確認しました。
理屈としてはform1の中にあるエレメントすべてを舐めて、checkboxだった場合、フラグに設定された真偽値をcheckedに設定します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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[]の配列を読むという処理もできると思いますが、できればどちらかだけ「すべてチェック」できればスマートだと思います。

お手数でなければ、いま少しご指導いただけないでしょうか。