• ベストアンサー

Javascript? チェックボックスにチェックをいれると・・

Yahooメールのように、チェックボックスにチェックをいれると その行(<tr>タグ)に色がつくようなJavascriptを探しています。 よろしくお願いします。

  • fm0606
  • お礼率13% (100/761)
  • HTML
  • 回答数1
  • ありがとう数2

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

サンプコードです。 <html> <head> <style type="text/css"> tr.checked{ background-color:#ccc; } </style> <script type="text/javascript"> <!-- function trCheck(O){ O.parentNode.parentNode.className = (O.checked)?'checked':''; } function trCheck_i(tableId){ var T = document.getElementById(tableId); for(var i=0;i<T.rows.length;i++){ T.rows[i].cells[0].firstChild.onclick=function(){trCheck(this)} } } //--> </script> </head> <body onload="trCheck_i('test')"> <table id="test"> <tr><td><input type="checkbox"></td><td>aaaaa</td></tr> <tr><td><input type="checkbox"></td><td>bbbbb</td></tr> <tr><td><input type="checkbox"></td><td>ccccc</td></tr> </table> </body> </html>

fm0606
質問者

お礼

お返事が遅くなり申し訳ございません。 成功いたしました! ありがとうございました。

関連するQ&A

  • Javascript? チェックボックスと・・・・

    HTMLのチェックボックスやラジオボタンのタグで、 チェックをつけずに次の画面へアクションをおこすと ”チェックつけなさい”ポップアップ画面を表示させたいのですがJavaScriptなのでしょうか? 記述方法をよろしくお願いします。

    • ベストアンサー
    • Java
  • チェックボックスについて

    こんばんは。いつもお世話になっておりますが、こちら(JavaScript)では、初めての投函です。 よくヤフーやホットメールなどのwebmailの受信ボックスなどに、削除するためのチェックボックスが備わっておりますが、全てのチェックを入れるために、最初の一行目のチェックボックスにチェックを入れることで全てにチェック。チェックを外す事で全てを外す。という動作が行われていると思います。 私、PHPの方ではよく質問させていただく事もあり、お恥ずかしいながら、上記質問をPHPで・・と思っていたら、これら動作はJavaScriptであることをお教え頂きました。 これまでJavaScriptには無縁であったこともあり、色々なサイトにお邪魔しているものの、設定ボタン、解除ボタンによる設定・解除の説明はあるものの、チェックボックスによる、これらの動作の説明がなく、改めてこちらにて質問させて頂くに至りました。 色々と試してはいるものの、チェックボックスにチェックを入れると全てにチェックが入るが、解除するまでに至っておりません。 お忙しい中恐縮ですが、ご指導のほど宜しくお願い申し上げます。

  • チェックボックスにチェックがはいるとテーブルのセル背景色が変更する

    javascriptはカスタマイズもままならないくらいの無知なのですが、検索してもどうしてもわからず、お教えいただけたらと思いご質問いたします。 題名の通り、項目にそれぞれチェックボックスまたはラジオボタンがあり、 チェックされると、そのテーブルの行(tr)の背景に色を付けたいのです。 (yahooメールやgmailのようなものです) 参考になりそうなものを検索しては見るのですが、どうしてもカスタマイズでつまづいてしまいます。 例えば、以下のページでは、変更する指定がidであったため出来ませんでした。 http://homepage2.nifty.com/godakaz/laboratory/background/bg3.html (同じ色を複数箇所で変更できるようなものがよいです) または、 http://javascript.style-mods.net/dhtml/dhtmltips_2-03.htm こちらのページはfirefox(win)で実現できていないようで。。 どのようにすればできるでしょうか? どうぞどうか何卒よろしくお願い致します。

  • チェックボックスにチェックを入れると行が変わるようにしたい

    ビルダーV9を使っています。 ある表で、チェックボックスを入れたいのですが 入れ方そのものが分かりません。 また、チェックボックスにチェックを入れると その行に色がつくように、 また解除すると色が元に戻るようにしたいのですが やり方を教えてください! お手数ですが、よろしくお願いいたします。

  • チェックボックスについて

    こんばんは。お世話になっております。 HotMailや、Yahooなどを代表するwebメールの受信ボックスなどに、削除する場合、チェックボックスにてチェックを入れた後・・となりますが、その多くの受信ボックスなどは、1行目(項目名)のチェックボックスにチェックを入れると、全てのチェックボックスにチェックが入る・・と言った流れになっているかと思います。 この場合、どのような流れになるのでしょうか? 初心者故にか、送信ボタンなどで送信した場合であれば、POSTする事により全てのチェックを入れることは想像出来るのですが、チェックを入れただけで全てのチェックが入る・・という流れが想像できずにおり、アドバイスなどいただければ幸いに思います。 お忙しい中恐縮ですが、宜しくお願い致します。

    • ベストアンサー
    • PHP
  • JavaScriptにて、2つのチェックボックスのチェックができません

    お世話になっております。 お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか? 現在採用に関する応募フォームを作成しています。 JavaScriptにてフォーム内のチェックボックスに チェックが入っているか、必須チェックをさせたいと思っています。 テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、 チェックボックスの項目についての必須チェックがうまくいきません。 チェック完了後、cgiにてメールを送信するようにしているのですが、 チェックがされず、メールを送信してしまいます。 ローカルで行ってみたのですが、チェックをスルーして、 cgiに遷移してしまいます。 フォームイメージは以下の感じです。 <応募フォーム> --------------------------- 希望勤務地:□本社 □大阪 --------------------------- 2つのチェックボックスどちらにもチェックが入っていない場合は、 エラーメッセージを出し、処理を中止します。 どちらのチェックボックスにもチェックが入っていても、 エラーは出さずにcgiへ遷移します。 以下は現在のコードの内容です。 <HTMLコード> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> <input type="checkbox" name="希望勤務地" value="本社" checked>本社 <input type="checkbox" name="希望勤務地" value="大阪">大阪 <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> <Scriptコード> function check(){ if(!document.応募フォーム.希望勤務地.value.checked){ flag = 1; window.alert('必須項目[希望勤務地]にチェックがされていません'); } } 色々試してみたのですが、うまくいきませんでした。 チェックボックスのnameを同じ名前にしているのが原因でしょうか? お手数ですが、宜しくお願いいたします。

  • JavaScript チェックボックスで指定の箇所をチェックする方法

    初めての投稿ですが、よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 一覧表の行or列の先頭にあるチェックボックスを選択すると 選択された行or列にあるチェックボックスを全てチェックされ、 先頭のチェックボックスを外すと全て解除される。 (例:横A□チェックボックスを選択すると右にある全てのチェックボックスが選択される。チェックを外すと右にある全てのチェックボックスが未選択になる。) という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦A<br><input type="checkbox" id="" /></td> <td>縦B<br><input type="checkbox" id="" /></td> <td>縦C<br><input type="checkbox" id="" /></td> </tr> <tr> <td>横A<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横B<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> <tr> <td>横C<input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> <td><input type="checkbox" id="" /></td> </tr> </table> </form> </BODY> </HTML>

  • テーブル行のクリックでチェックボックスの制御

    テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを 制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまく チェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、 同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのでは ないかと思われます。 チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>

  • チェックボックスのON/OFF

    こんにちは。 以下のようなテーブルがありまして <tr> <td>チェックボックス</td> <td>ID</td> <td>名前</td> </tr> このテーブルのTRのどこかをクリックするとチェックボックスを ON/OFFする方法のヒントを頂けないかと思って質問に参りました イメージとしては<label for="">の機能をTRに付けたいのです 作表とチェックボックスの環境としましては データベースから取り出したデータをforで回してテーブルに配置 チェックボックスのタグは各行に1つでこれのON/OFFがしたい チェックボックスのデータは配列で送りたいので○○[]名称 となっております (この辺りにはPHPを使用しています) セルクリックで背景色を変更するサンプルと、チェック全選択/全解除の サンプルはあるのですが、組み合わせや加工の仕方がわからず 調べてみてもチェックボックスをクリックしたら…というサンプルばかりで 私が求めている方法は残念ながら見つけられませんでした こんな質問だと丸投げになってしまうので、ヒントや処理の流れだけでも 教えて頂けると助かります ヨロシクお願いします

  • JavaScript チェックボックスで複数選択

    今晩は、 JavaScript チェックボックスで複数選択で、1つもチェックされなかった場合にメツセージが出るようにしたいのですが、どのような記述にしたら良いでしょうか、 宜しくお願いします。

専門家に質問してみよう