初めての投稿ですが、よろしくお願いします。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>
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で質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascript クリックすると、あ...
-
ハイパーリンクを別ウインドウ...
-
テーブル内に表示されている数...
-
マウスをブラウザの外に出した...
-
JavaScriptでテーブルをクリッ...
-
HTMLのテーブルについて
-
JavaScriptで特定のtdタグにcla...
-
【至急】チェックボックスを用...
-
エラーで悩んでます。。
-
セレクトタグで選択したものを...
-
テーブル行のクリックでチェッ...
-
JavaScript上で文字化け
-
プルダウンで選択すると、DBの...
-
JavaScriptで、テーブルクリッ...
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
jQueryでクリックされたテーブ...
-
jspのエラー
-
【JavaScript】tableタグを利用...
-
右の一覧表から必要なものをク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
JavaScriptでテーブルをクリッ...
-
【UWSC】HTML内のある部分を抽...
-
至急!GetElementById でtdの...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
動的なtableの値を取得したい
-
Selenium.ChromeDriverの使い方...
-
二次元配列に数字をランダムに...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
テーブルの変数について
-
マウスをブラウザの外に出した...
-
テーブル行のクリックでチェッ...
-
jquery datatablesを使用 イン...
おすすめ情報