![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
初めての投稿ですが、よろしくお願いします。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>
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_12.png?e8efa67)
No.1ベストアンサー
- 回答日時:
<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="x1y0" onClick="tate(1)"/></td>
<td>縦B<br><input type="checkbox" id="x2y0" onClick="tate(2)" /></td>
<td>縦C<br><input type="checkbox" id="x3y0" onClick="tate(3)" /></td>
</tr>
<tr>
<td>横A<input type="checkbox" id="x0y1" onClick="yoko(1)"/></td>
<td><input type="checkbox" id="x1y1" /></td>
<td><input type="checkbox" id="x2y1" /></td>
<td><input type="checkbox" id="x3y1" /></td>
</tr>
<tr>
<td>横B<input type="checkbox" id="x0y2" onClick="yoko(2)"/></td>
<td><input type="checkbox" id="x1y2" /></td>
<td><input type="checkbox" id="x2y2" /></td>
<td><input type="checkbox" id="x3y2" /></td>
</tr>
<tr>
<td>横C<input type="checkbox" id="x0y3" onClick="yoko(3)" /></td>
<td><input type="checkbox" id="x1y3" /></td>
<td><input type="checkbox" id="x2y3" /></td>
<td><input type="checkbox" id="x3y3" /></td>
</tr>
</table>
</form>
<script>
function yoko(n){
var f=document.getElementById('x0y'+n).checked;
for(var i=1;i<4;i++) document.getElementById('x'+i+'y'+n).checked=f;
}
function tate(n){
var f=document.getElementById('x'+n+'y0').checked;
for(var i=1;i<4;i++) document.getElementById('x'+n+'y'+i).checked=f;
}
</script>
</BODY>
</HTML>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
至急!GetElementById でtdの...
-
TD内のチェックボックスの位置...
-
JavaScriptで特定のtdタグにcla...
-
「オブジェクトは、このプロパ...
-
セルをドラッグで選択するときに、
-
リンク色の変更
-
【UWSC】HTML内のある部分を抽...
-
データベース呼び出しに使用す...
-
jspでのArrayListの値の表示
-
テーブル列の表示・非表示機能...
-
【JQuery】テーブルで行選択さ...
-
Jquery on click 発火しない
-
プルダウンで選択すると、DBの...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
<input>の選択肢をプルダウンメ...
-
TextBoxに半角数字以外を入れた...
-
value内に変数を入れたい
-
<JavaScript>tableタグを入力不...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
スクロールバーの表示位置を変...
-
【UWSC】HTML内のある部分を抽...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
HTML中のTABLEのデータを抽出す...
-
テーブルの項目の値取得
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
-
javascript クリックすると、あ...
-
JavaScriptでテーブルをクリッ...
-
jquery datatablesを使用 イン...
-
「オブジェクトは、このプロパ...
-
jqueryで表に連番No.を追加したい
おすすめ情報