- ベストアンサー
htmlでチェックボックスを全選択
現在perl言語とhtml言語を使用しweb上で見れるホームページを作成しています。 perl言語とhtmlを言語を使用して全てのチェックボックスにチェックをいれるボタンを作成したいのですが、 中々上手くいきません。 ※以下.cgi内の部分ソース print <<HTML_BODY; </table><br> <input type='submit' value='送信'> <input type='reset' value='リセット'> </center> </form> </body> </html> HTML_BODY ネットでも調べたのですが、JavaScriptを使用しないとできない？様な事が書かれていました。 私一人では分からないので、皆様ご教授お願い致します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
CGIでもできます。 というか、昔は全部（必ず）この方法でした。 CGIではボタンを押すたびにページ全体を読み直し、表示し直さないと行けないので、時間がかかる事があります。 利用者の利便性（表示の待ち時間を減らす）を考えれば、JavaScriptをおすすめしますが、 JavaScriptを使用できない、使用を停止している環境もある事を忘れずに。。。 index.cgi --------------- #!/usr/bin/perl use CGI; my $q=CGI->new; my $smt=$q->param('smt'); my $checked=$q->param('chk_on')?'checked':''; my $message=($smt)?'':$q->param('message'); print "Content-Type: text/html\n\n"; print <<_HTML_; <html> <body> <form action="index.cgi" method="post"> <label><input type="checkbox" name="c1" value="1" $checked>check1</label> <label><input type="checkbox" name="c1" value="2" $checked>check2</label> <label><input type="checkbox" name="c1" value="3" $checked>check3</label> <br> <input type="submit" name="chk_on" value="全てチェックする"> <input type="submit" value="全てはずす"> <hr> <input type="text" name="message" value="$message_tmp"><br> <input type="submit" name="smt" value="送信"> </form> <hr> _HTML_ if($smt){ $message=$q->param('message'); print <<_HTML_; <h1>投稿した内容</h1> <p>$message</p> _HTML_ } # if($smt) print <<_HTML_; </body> </html> _HTML_ exit; 未検証です。
その他の回答 (2)
- STICKY2006
- ベストアンサー率29% (1536/5269)
>>JavaScriptを使用しないとできない？様な事が書かれていました。 うん。 多分、JavaScriptを使うのが一番スマートかと。 ユーザーのブラウザ上で動くわけですし。 （Perlの方でも当然、できなかないですけど、わざわざ一回サーバの方で処理する必要も無いでしょうし。 JavaScriptのお勉強をすることをオススメしておきます。 例）これが良いです！とは言いませんが。 http://www.nishishi.com/javascript/2007/checkbox-onoff.html
お礼
ご回答有難うございます。 早速JavaScriptの勉強をします。
- inu2
- ベストアンサー率33% (1229/3720)
たとえば 「全てをチェックする」 というようなボタンを作って、それをクリックすると表示されているチェックボックス全てをチェック状態にする。 などのような動きを実現したいのであればJavaScriptでなければ不可能です。 HTMLは見た目の構成を作るためのもの。 何かしらの動きを再現はできない。 perlは、サーバー上でプログラムが動くわけですから、ブラウザでの見た目を動的に変えることは出来ません。 ですから、ブラウザ上で動くプログラムが必要になります それがJavaScriptです。
お礼
早速のご回答有難うございます。 あるサイトから以下のを持ってきて貼り付けてみたのですが、何故か全チェックが出来ませんでした。 ご教授お願い致します。 ※以下持ってきたソース <HTML> <HEAD> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> <TITLE>チェックボックスを全チェック</TITLE> <SCRIPT TYPE="text/javascript"> var count; function BoxChecked(check){ for(count = 0; count < document.form1.r1.length; count++){ document.form1.r1[count].checked = check; //チェックボックスをON/OFFにする } } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"><BR><BR> <INPUT TYPE="checkbox" NAME="r1" VALUE="1"> 項目(1) <INPUT TYPE="checkbox" NAME="r1" VALUE="2"> 項目(2) <INPUT TYPE="checkbox" NAME="r1" VALUE="3"> 項目(3) <INPUT TYPE="checkbox" NAME="r1" VALUE="4"> 項目(4) <INPUT TYPE="checkbox" NAME="r1" VALUE="5"> 項目(5)<BR> <INPUT TYPE="checkbox" NAME="r1" VALUE="6"> 項目(6) <INPUT TYPE="checkbox" NAME="r1" VALUE="7"> 項目(7) <INPUT TYPE="checkbox" NAME="r1" VALUE="8"> 項目(8) <INPUT TYPE="checkbox" NAME="r1" VALUE="9"> 項目(9) <INPUT TYPE="checkbox" NAME="r1" VALUE="10"> 項目(10)<BR> </FORM> </BODY> </HTML> HTML_BODY2
お礼
ご返答ありがとうございます。 早速試してみたところ、正常に動きました。 これを元に作成していきたいと思います。