複数のチェックボックスから複数の分岐先に値を保持する方法
- 複数のチェックボックスから複数の分岐先に値を保持する方法について説明します。
- Checkboxの値を複数のボタンで分岐させる際に、値を引き継ぐ方法や全選択・全解除のボタンの作成方法について説明します。
- JavaScriptやセッションを利用して値を引き継ぐ方法や遷移先を制御する方法についても解説します。
- ベストアンサー
複数のチェックボックスから複数の分岐先に値を保持
恥ずかしながら、どなたかご指導いただければとても助かります。 稚拙なソースで、かつ間違いだらけで見づらいと思いますがどうぞよろしくお願いします。 ・複数のCheckboxの値を、複数設定したボタンで分岐した時に、その値をそれぞれで引き継ぎたい （Aボタンを押してもBボタンを押しても、チェックした値は同じ値を引き継いでいく、という意味） ・Checkboxの数は多いため、全選択or全解除のボタンを使用したい（Javascript利用) ・可能であればボタンは以前に作成した画像を利用したい（例 icon_A-button.gif） ここで、<Form> に action を入れないとCheckboxの値は引き継がれず、入れてしまうとその移動先にしか移動できない また </Form> を入れる位置は本来であれば※1であると思うがここに入れると、移動もできない ※2の位置だと、反映はされるが、Bボタンを押してもAボタンの行き先に飛んで行ってしまう etc etc・・・ <Form></Form>の位置や、Javascriptのlocationなど色々と試してみましたがどうもうまくいきません onClickなど、JavaScript またはセッションなどを利用した方がよいのでしょうが、方法が判りません。 どうかよろしくお願いいたします。 confirm.php <HTML> <HEAD> <TITLE></TITLE> <script language="javascript"> <!-- function allcheck(formName, checkboxName, bool) { for(i = 0; i<eval('document.' + formName + '.elements["' + checkboxName + '"].length'); i++) { eval('document.' + formName + '.elements["' + checkboxName + '"][' + i + '].checked = ' + bool); } } //--> </SCRIPT> </HEAD> <BODY> <? $Data = array('A-data','B-data','C-data','D-data');?> <form action = "view1.php" method ="post" name ="form1"> <input type=checkbox name='ChkData[]' value = "<? print $Data[0]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[1]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[2]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[3]; ?>"> <INPUT TYPE="button" onClick=allcheck('form1','ChkData[]',true) VALUE= "All-ON"> <INPUT TYPE="button" onClick=allcheck('form1','ChkData[]',false) VALUE= "All-OFF"> ※1 </form> <input type = "image" value="A-button" src="icon_A-button.gif" name="form1" onClick=location.href="view1.php"> <input type = "image" value="B-button" src="icon_B-button.gif" name="form1" onClick=location.href="view2.php"> ※2 </form> </BODY> </HTML> view1.php view2.php ・・・複数ボタンの飛ぶ先のソースの例 <? if( isset( $_POST[ 'ChkData' ] ) ){ $cbx_values = $_POST[ 'ChkData' ]; for( $i = 0; $i < count( $cbx_values ); $i ++ ){ print "送信された内容{$cbx_values[$i]} <br/>"; } } ?> 多分基本的なことなのでしょうが、全く見当がつきません。 以上ご指導の程、宜しくお願いいたします。
- sakisyo
- お礼率100% (1/1)
- PHP
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じ？ <script> function allcheck(f, cb, flg) { for(var i=0;i<f.elements[cb].length;i++){ f.elements[cb][i].checked=flg; } } </script> <?PHP $Data = array('A-data','B-data','C-data','D-data');?> <form> <input type="checkbox" name='ChkData[]' value = "<? print $Data[0]; ?>"> <input type="checkbox" name='ChkData[]' value = "<? print $Data[1]; ?>"> <input type="checkbox" name='ChkData[]' value = "<? print $Data[2]; ?>"> <input type="checkbox" name='ChkData[]' value = "<? print $Data[3]; ?>"> <input type="button" onClick=allcheck(this.form,'ChkData[]',true) VALUE= "All-ON"> <input type="button" onClick=allcheck(this.form,'ChkData[]',false) VALUE= "All-OFF"> <input type ="image" value="A-button" src="icon_A-button.gif" onClick='this.form.action="view1.php"'> <input type ="image" value="B-button" src="icon_B-button.gif" onClick='this.form.action="view2.php"'> </form>
関連するQ&A
- チェックボックスの全選択/解除について
お尋ねします。 チェックボックスの全選択/解除について １画面にチェックボックスのグループが複数（store、item）あります。 下記のソースだと【store】の全選択を押下すると【store】【item】両方とも 全選択状態になります。 【store】の全選択/全解除は【store】のみ 【item】の全選択/全解除は【item】のみにしたいのですが どのようにするとよろしいのでしょうか？ よろしくお願いします。 <SCRIPT TYPE="text/javascript"> <!-- function allcheck(targetForm,flag){ for(n=0;n<=targetForm.length-1;n++){ if(targetForm.elements[n].type == "checkbox"){ targetForm.elements[n].checked = flag; } } } --> </SCRIPT> <table width="70%" align = "center" cellspacing="0"> <form action="confirm.php" method="post" target="_blank"> <tr> <td align="center"> <input type="checkbox" name="store[]" value="1" />A店<br/> <input type="checkbox" name="store[]" value="2" />B店<br/> <input type="checkbox" name="store[]" value="3" />C店<br/> <input type="checkbox" name="store[]" value="4" />D店<br/> <input type="checkbox" name="store[]" value="5" />E店<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> <td align="center"> <input type="checkbox" name="item[]" value="1" />項目１<br/> <input type="checkbox" name="item[]" value="2" />項目２<br/> <input type="checkbox" name="item[]" value="3" />項目３<br/> <input type="checkbox" name="item[]" value="4" />項目４<br/> <input type="checkbox" name="item[]" value="5" />項目５<br/> <input type="button" value="全選択" onClick="allcheck(this.form,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this.form,false)"/> </td> </tr> <tr align="center"> <td colspan="4"> <input type="submit" name="con" value="確認"> </td> </tr> </form> </table>
- 締切済み
- PHP
- ラジオボタンが選択によるチェックボックス・ボタンの制御方法
お世話になります。 やりたい事 (1)ラジオボタン【小学校】：小学校のみ入力可 (2)ラジオボタン【中学校】：中学校（市立・私立）のみ入力可 (3)ラジオボタン【全ての学校】：小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの初期選択と選択保持
複数のチェックボックスのうちどれかを初期選択させ、ボタン押下後は選択保持をさせたいです。 片方のみならできるのですが、どなたかご教授いただけるとうれしいです。 現在のソースはこんな感じになっていて選択したものの保持はできるのですが、初期選択ができていません。よろしくおねがいします。 <html> <body> <form name="form" method="post"> <?php test1() ?> test1 <?php test2() ?> test2 <?php test3() ?> test3<br><br> <input type="submit" name="button" value="button"> </form> <?php function test1(){ if ($_POST['test1']){ echo "<input type=\"checkbox\" name=\"test1\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test1\">"; } } function test2(){ if ($_POST['test2']){ echo "<input type=\"checkbox\" name=\"test2\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test2\">"; } } function test3(){ if ($_POST['test3']){ echo "<input type=\"checkbox\" name=\"test3\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test3\">"; } } ?> </body> </html>
- 締切済み
- PHP
- チェックボックスの全選択・全解除を一つにまとめたい
http://shoyu-ramen23.jugem.jp/?eid=184を参考にチェックボックスの全選択・全解除をつけました。 ただし、上記のサンプルは全選択ボタン、全解除ボタンと二つに分かれている為、これを一つにしたいと思ったのですが、どうすればできるかわからなかったので、 アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【やりたい事】 1. 最初は「全て選択」ボタンのみ表示したいです。 2. 「全て選択」ボタンをクリックすると、「全て選択」ボタンが消え、代わりに「全て解除」ボタンを表示したいです(1回目,3回目,5回目・・・のクリックはこの動作)。 2. 「全て解除」ボタンをクリックすると、「全て解除」ボタンが消え、代わりに「全て選択」ボタンを表示したいです(2回目,4回目,6回目・・・のクリックはこの動作)。 【ソースコード】 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>タイトル</title> <script type="text/javascript"> function allcheck(targetForm,flag){ for(n=0;n<=targetForm.length-1;n++){ if(targetForm.elements[n].type == "checkbox"){ targetForm.elements[n].checked = flag; } } } </script> </head> <body> <form action="test.php" method="post"> <table> <tr> <td> <input type="button" onclick="allcheck(this.form,true)" value="全て選択"><br /> <input type="button" onclick="allcheck(this.form,false)" value="全て解除"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check1" name="data[check1]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check2" name="data[check2]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check3" name="data[check3]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check4" name="data[check4]"></td> </tr> <tr> <td><input type="checkbox" value="1" id="check5" name="data[check5]"></td> </tr> </table> </form> </body> </html> 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスの値取得。formが入れ子に…
ASPでの開発です。 データを一覧表示する画面で、データ1行の横に削除用のボタンがあります。 複数のデータを削除できるよう、その横にチェックボックスをつけたいと考えています。 ただ、そうすると構造が以下のように <form action="…"> <input type = "button" value="チェックした項目を一括で！"> <input type = "checkbox"> <form action "…"> <input type = "button" value="test"> </form> <input type = "checkbox"> <form action "…"> <input type = "button" value="test"> </form> </form> formが入れ子になり、うまく動作しません。 これを解消するにはどうしたら良いのでしょうか…？
- ベストアンサー
- Microsoft ASP
- ラジオボタンが選択された項目のみ操作可能
ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled？readonly？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスから配列を使って値を受け取る方法
チェックボックスから配列を使って値を受け取る方法について、 以下の通りに試してみたのですが、上手く行かず、 配列$fCに値が入りません。 どなたか原因を教えていただけないでしょうか。 ------------------------------------------------ hoge.html <form action="hoge.php"> <input type="checkbox" name="fC[]" value="hoge"> hoge <br> <input type="checkbox" name="fC[]" value="foo"> foo <br> <input type="checkbox" name="fC[]" value="bar"> bar <br> <input type="submit" value="OK"> </form> ---------------------------------------------------------- ------------------------------------------------- hoge.php <? for( $i=0; $i<count($fC); $i++ ) { print $i ." ::: " . $fC[$i] . "<br>\n"; } ?> ----------------------------------------------------------
- ベストアンサー
- PHP
- チェックボックスの値を取り出したい
こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ？マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが．．． ３つチェックされていてＯＫをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value ？ var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="ＯＫ" > </form> </html>
- ベストアンサー
- JavaScript
- チェックボックスで指定したものをダウンロード
JavaScriptの初心者です。 画像一枚毎にチェックボックスを作って、チェックした画像がダウンロードボタンをクリックすると保存されるようなＨＰを作りたいのですが、いろいろ調べているのですがどのようにすればよいのか見当がつきません。どうかご存じの方よろしくお願いします。 イメージは、フォトギャラリーのサムネイル画像の下にチェックボックスがあってチェックした画像のみダウンロードするという感じです。 ＣＧＩを使わずにできるかどうかも合わせてご教示いただけたらと思います。 <FORM NAME="form1"> <INPUT TYPE="checkbox" VALUE="1"> 画像(1) <INPUT TYPE="checkbox" VALUE="2"> 画像(2) <INPUT TYPE="checkbox" VALUE="3"> 画像(3) <INPUT TYPE="checkbox" VALUE="4"> 画像(4) <INPUT TYPE="checkbox" VALUE="5"> 画像(5)<BR> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="ダウンロード"> </FORM>
- ベストアンサー
- JavaScript
- チェックボタンの制御方法
チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご多忙だとは存じますが、早速の回答、とても助かりました。 こんなに早くご連絡をいただけるとは思いもしませんでした。 試したところ、おかげさまで無事できました。 初心者とはいえ、まだまだ勉強が足りないと、つくづく感じた次第です。 機会がありましたらまたご指導いただければ幸いです。 本当に有り難うございました。