チェックボックスの値の取得方法とは？

2023/07/27 03:47

このQ&Aのポイント

初歩的なことがわからない方へ、チェックボックスをクリックしたときにその値を取得する方法を教えてください。
JavaScriptを使用して、チェックボックスのクリックイベントを監視し、クリックしたチェックボックスの値を取得する方法を教えてください。
他のチェックボックスに関係なく、クリックしたチェックボックスの値を取得して表示する方法を教えてください。

ベストアンサー

チェックボックスの値の取得

2002/10/23 18:38

初歩的なことがわかりません。チェックボックスをクリックしたときに、そのチェックボックスの値(Value)を取得する方法をアドバイス下さい。 <SCRIPT language=JavaScript> function test() alert(★)←この辺をうまく書きたい。 </SCRIPT> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="玄関" onclick="test()">玄関<BR> <INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="トイレ" onclick="test()">トイレ<BR> 「玄関」をクリックすると「玄関です」とalert 「トイレ」をクリックすると「トイレです」とalert 他のチェックボックスにチェックが入っているかは無視。クリックしたチェックボックスのvalueをalert。下記質問の作業の初めの段階でつまづいています。 (^^; http://www.okweb.ne.jp/kotaeru.php3?q=387758

s-holmes
お礼率47% (767/1609)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#3345

2002/10/23 18:49 回答No.1

<INPUT TYPE="CHECKBOX" NAME="mycheck" VALUE="玄関" onclick="test()">玄関<BR> ここを、 onclick="test(this.value)" としておいて、 function test(msg) alert(msg+"です。"); でいけませんかね？

質問者

お礼 2002/10/23 19:06

回答ありがとうございました。 >this.value で行けました。これまでコピペで使ったものを調べてみたら、１個だけ使用していました。 (^^; ＃勉強になりました。

関連するQ&A

チェックボックスのlengthについて
チェックボックスで以下のソースでは obj.length=[undefined] と表示されます。1という結果ではないのでしょうか？ <script type="text/javascript">  </script> <form name="test_form"> <input type="checkbox" name="chk" value="">チェック1 <input type="button" value="テスト" onClick="test(document.test_form.chk)"> </form>
- ベストアンサー
- HTML
チェックボックスのCGIへの値の受け渡し方
チェックボックスで複数回答があった場合のデータの受け取りをどうしても分からないので教えてください。別の人が作ったCGIを改造（今回の複数回答可の部分を）しています。以下のような記述だとvalue値が取れず、空白になっています。【HTML】（チェックを２つ以上出来ないようにするためにJavascriptで制限をかけています。nameを同じにするやり方にしています。） <INPUT type="checkbox" name="q1" value="赤" onclick="return limitation(this,2)">赤<br> <INPUT type="checkbox" name="q1" value="黄" onclick="return limitation(this,2)">黄<br> <INPUT type="checkbox" name="q1" value="青" onclick="return limitation(this,2)">青<br> 【CGI】 use CGI qw(:standard); @check1=param("q1"); $result1=join(',',@check1); print "<td width=300><font size=2>$result1</font> </td>\n"; このPerlは@check1にq1のチェックが付いたものが格納されていると認識しています。では、どうしたらそれをとりだせるのでしょうか？初心者で申し訳ありません。やり方にこだわらず、今回の目標は (1)チェックボックスに規定（２つ）以上のチェックが入るとアラートでチェックしすぎた瞬間に知らせてくれる (2)２つチェックされた場合の値の取出しを可能にする。
- ベストアンサー
- Perl
チェックボックスが複数ある場合の値取得について
【javascript】チェックボックスが複数ある場合の値取得についてこんにちは。チェックボックスのグループが複数ある場合に、値取得のロジックをチェックボックスのグループ毎に記述せず、まとめて１つのロジックで取得できる記述方法はありますでしょうか？色々と検索しましたが、解決できず何かよい方法があれば教えて頂けないでしょうか。よろしくお願い致します。 ■やりたいこと・チェックボックスの値取得の記述を１つにまとめたい。サンプルソースでは、チェックボックスのグループが3つで、チェックボックスの値取得のソースも３つ記述しています。チェックボックスのグループを50個設置すると、50回値取得のソースを記述することになってしまうので、１つの記述にまとめたいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <style type="text/css"> table {border: solid;} td{width:150px;} </style> <script type="text/javascript" language="JavaScript"></script> <script type="text/javascript" language="JavaScript"></script> </head> <body> <FORM name="test"> <table> <tr> <td class="c"> ■天気 </td> <td class="n" > <label for="radiocheck04"><input type="radio" id="radiocheck04" name="radio00" value="晴れ" onClick="setVal(this);">晴れ</label> <label for="radiocheck05"><input type="radio" id="radiocheck05" name="radio00" value="曇り" onClick="setVal(this);">曇り</label> <input type="hidden" name="hradio00" value="未入力"><br> </td> </tr> </table> <table> <tr> <td class="c" > ■月曜日<br>　(複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox02" value="さくら">さくら<br> <input type="checkbox" name="checkbox02" value="まっちゃ">まっちゃ<br> <input type="checkbox" name="checkbox02" value="不明"> 不明<br> </td> </tr> </table> <table> <tr> <td class="c" > ■火曜日<br>　(複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox03" value="バニラ">バニラ<br> <input type="checkbox" name="checkbox03" value="不明"> 不明<br> </td> </tr> </table> <table> <tr> <td class="c" > ■火曜日<br>　(複数選択可) </td> <td class="n" > <input type="checkbox" name="checkbox04" value="いちご">いちご<br> <input type="checkbox" name="checkbox04" value="ミント">ミント<br> <input type="checkbox" name="checkbox04" value="バニラ">バニラ<br> <input type="checkbox" name="checkbox04" value="不明"> 不明<br> </td> </tr> </table> <input type="button" value="確認" onclick="javascript:disp(this.form)"> </Form> <body> </html>
- ベストアンサー
- JavaScript
チェックボックスをクリックした際、自動的に他の値も
■チェックボックスをクリックした際、自動的に他の値も追加したい下記のようなチェックボックスがあった際に、 <input type="checkbox" name="hoge[]" value="1" />ホゲ　 <input type="checkbox" name="piyo[]" value="1" />ピヨ　 <input type="checkbox" name="puyo[]" value="1" />プヨ　ホゲをクリックしたら、value="1"になるかと思うのですが、このvalue部分を動的に生成することはできるでしょうか？例えば、ホゲをクリックしたら(ホゲをクリックした時だけ)、自動的に、 <input type="checkbox" name="hoge[]" value="1" /> <input type="checkbox" name="hoge[]" value="2" /> <input type="checkbox" name="hoge[]" value="3" /> <input type="checkbox" name="hoge[]" value="4" /> <input type="checkbox" name="hoge[]" value="5" /> <input type="checkbox" name="hoge[]" value="6" /> <input type="checkbox" name="hoge[]" value="7" /> <input type="checkbox" name="hoge[]" value="8" /> <input type="checkbox" name="hoge[]" value="9" /> をクリックしたのと同じ処理が走るよう、スクリプトで書くには、どうすればよいでしょうか？
- ベストアンサー
- JavaScript
指定したチェックボックスに一斉にチェック
下記の「関東」をクリックすると、東京、神奈川にチェックを入れたいのですが・・。実際のチェックボックスはたくさんあります。 function test() {ここにどうかく？} <a href="javaScript:test()">関東</a><BR> <INPUT TYPE="CHECKBOX" NAME="basho" VALUE="東京">東京　 <INPUT TYPE="CHECKBOX" NAME="basho" VALUE="神奈川">神奈川　 <INPUT TYPE="CHECKBOX" NAME="basho" VALUE="鹿児島">鹿児島　 <INPUT TYPE="CHECKBOX" NAME="basho" VALUE="大分">大分
- ベストアンサー
- JavaScript
チェックボックスのperlでの値の渡し方と、postgreSQLでのデータ書込みについて教えて下さい。
今、下記のような複数選択可のチェックボックスを作成していまして、perlでの値の渡し方と、 postgreSQLでのデータ書込みについて悩んでいます。良かったら教えて下さい。 <INPUT type="checkbox" name="test" value="Ａ">Ａ<BR> <INPUT type="checkbox" name="test" value="Ｂ">Ｂ<BR> <INPUT type="checkbox" name="test" value="Ｃ">Ｃ<BR> というチェックボックスのうち、ＡとＣにチェックをつけたとします。その際、perlでデータを引き継いだ場合、 testには、ＡとＣが入っているのでしょうか？また、サーバに書き込む際に、データはどのように保存されるのでしょうか？ 1つの名前では無理なのでしょうか？またその場合、postgreSQL のデータ項目名も3つ名前を用意しておかないといけないのでしょうか？編集画面を作成する際に、そのサーバの項目から値をひっぱりだして、checkedを表示させたいのですが、 <INPUT type="checkbox" name="test" value="Ａ" checked>Ａ<BR> <INPUT type="checkbox" name="test" value="Ｂ">Ｂ<BR> <INPUT type="checkbox" name="test" value="Ｃ" checked>Ｃ<BR> と出るようにしたいのですが、何か良い方法がありましたら、教えて下さい。お願いします。
- ベストアンサー
- Perl
チェックボックス　とラジオボタンの値取得について
チェックボックス　とラジオボタンの値取得についてこんにちはチェックボックスの中にラジオボタンがある場合にチェックボックスの値に続けてラジオボタンの値を表示したいのですが、うまくいかず悩んでいます。【やりたいこと】 □そのた２をチェクして男性を選択した場合　「そのた２男性」と表示したい。例そのた１そのた２男性そのた４そのた５女性サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。サンプルではチェックボックスの数は１個ですが、 □が３０個以上　のチェックボックスが５０個くらいあるので、１回の記述で済ませたいのですが、ラジオボタンが隣にあったら値を取得する　のようにできるのでしょうか？何かよい方法があれば教えて頂けないでしょうか。よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript">  </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>
- ベストアンサー
- JavaScript
チェックボックスの全選択/解除について
お尋ねします。チェックボックスの全選択/解除について１画面にチェックボックスのグループが複数（store、item）あります。下記のソースだと【store】の全選択を押下すると【store】【item】両方とも全選択状態になります。【store】の全選択/全解除は【store】のみ【item】の全選択/全解除は【item】のみにしたいのですがどのようにするとよろしいのでしょうか？よろしくお願いします。 <SCRIPT TYPE="text/javascript">  </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
チェックボックスで指定したものをダウンロード
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
クッキーの初歩的質問
クッキーに下記のような内容を書き込む方法を教えて下さい。上から順にクリックしていったときに、alert(★)の部分を「1,2,3」という結果にしたいのですが。 <SCRIPT language=JavaScript> function memoryCookie(num){ expires = new Date() expires.setTime(expires.getTime() + 24*60*60*1000) document.cookie = "mydata=" + num + ";expires=" + expires.toGMTString() alert(★) } </SCRIPT> <form name="myform"> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="1" onclick="memoryCookie(this.value)">1<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="2" onclick="memoryCookie(this.value)">2<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="3" onclick="memoryCookie(this.value)">3<BR>
- ベストアンサー
- JavaScript