- ベストアンサー
JavaScriptチェックボックスでテーブルフォームを作成し、一覧表の行or列の先頭にあるチェックボックスの選択で関連するチェックボックスを一括操作する方法
- JavaScriptを使用して、チェックボックスで構成されたテーブルフォームを作成し、一覧表の行または列の先頭にあるチェックボックスを選択することで、関連するチェックボックスを一括操作する方法を調べています。
- 現在、HTMLとJavaScriptを使用して、一覧表の行または列の先頭にあるチェックボックスの状態を変更すると、関連するチェックボックスの状態も変更されるようなテーブルフォームを作成しようとしています。
- しかし、適切な方法が見つかりませんでした。質問させていただき、この問題の解決策をご教示いただけると幸いです。
- omega0322
- お礼率45% (5/11)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （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>
お礼
すばらしい回答ありがとうございます。 まさに求めていたものでした！ 非常に助かりましたm(_ _)m