初めての投稿ですが、よろしくお願いします。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>

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

すばらしい回答ありがとうございます。
まさに求めていたものでした!

非常に助かりましたm(_ _)m

お礼日時:2008/08/12 16:30

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q

に文字列をセットするために

<form>
<input type="file" id="x"/>
</form>
<input type="button" onclick="f()" value="push"/>
<script>
function f()
{
var e=document.getElementById("x");
e.value="x.txt";
}
</script>

としてもセットできません

<form>
<input type="text" id="x"/>
</form>
<input type="button" onclick="f()" value="push"/>
<script>
function f()
{
var e=document.getElementById("x");
e.value="x.txt";
}
</script>

であればセットできるのです
どうしたらセットできるでしょうか?

Aベストアンサー

Minefield 3.0a1で実験を行いました。
おっしゃる状況が再現できました。

参照クリック後のinput要素のvalue値を調べた時は問題なさそうだったので

Console2を用いてエラーを見てみたところ
エラー: Security error = NS_ERROR_DOM_SECURITY_ERR

と、セキュリティ上の理由からエラーが出ているようでした。多分仕様だと思います。

ところで...補足要求。
【何がしたくて】これを行いたいのでしょう?

Q

<input type="hidden" name = "hoge">があったとします。
これを、javascriptを使用し nameで検索します。
”hoge”を検索後、その”hoge”という名前を変更する方法を探しています。 

<input type="hidden" name = "hoge">
       ↓↓↓↓↓
<input type="hidden" name = "fuga"> 

リフレッシュ無しで、上記のようにnameを変える方法が知りたいです。

ご存知の方おりましたら、お手数ですが教えていただけませんでしょうか。
宜しくお願いいたします。

Aベストアンサー

タグが特定出来れば、setAttribute等で属性値を変更出来ます。
setAttribute("name","fuga")

Qで、Q1に後で値を設定して表示するには

お世話になります。
<input type="text" name="Q1">で、Q1に後で値を設定して表示するにはどうしたら良いものでしょうか。
name="Q1"
と、しているので、
onMousedown="function()"
で、nameでしてしたエリアに値を書き込めば、できると思うのですが、
このfunction()をどのように書いたらよいものか、いろいろ調べてもわかりません。
何とかご教示願えないでしょうか。
よろしくお願いします。

Aベストアンサー

javascriptを利用することで出来ます。
こんな感じで動くでしょう。
ちなみにテキストボックスなどをjavascriptで操作する場合は
idをつけておくと便利です。

これ以上をやりたいというのであれば
参考URLなど見て勉強してみてください
<html>
<head>

</head>
<body>

<input type="text" id="Q1" name="Q1" onmousedown="hoge()">
</body>
<script type='text/javascript'>
function hoge()
{
Q1.value = ""; //""のなかに設定する値
}
</script>

参考URL:http://www.parkcity.ne.jp/~chaichan/src/javasc21.htm

Qで画像を選択

HTMLのページ内で<input type="file">で画像を選択して
その画像を現在のHTMLページに表示する
という質問のベストアンサー
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1151913361

にしたがって、使ってみましたが、表示されません。
使い方のどこがまちがっているか教えてください。

また、そこにある動作サンプルが見えません。
動作サンプルを見る方法もわかりましたら、お願いします。

--------------------------
<html lang="ja">
<head>
<title></title>
<script type="text/javascript">

function dispImg() {
var myFile = document.getElementById('ans5');
var src = null;
if (window.File) {
src = myFile.files[0].getAsDataURL();
} else {
src = myFile.value;
}
document.getElementById('DISP').src = src;
}
</script>
</head>
<body>

<form name ="a">

写真を指定してください:
<input type="file" name="ans5" Onchange="dispImg();"><br>
<img src="" alt="" id="DISP">
</form>

</body>
</html>

HTMLのページ内で<input type="file">で画像を選択して
その画像を現在のHTMLページに表示する
という質問のベストアンサー
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1151913361

にしたがって、使ってみましたが、表示されません。
使い方のどこがまちがっているか教えてください。

また、そこにある動作サンプルが見えません。
動作サンプルを見る方法もわかりましたら、お願いします。

--------------------------
<html lang="ja">
<head>
<title></title>
<script type="text/javascript...続きを読む

Aベストアンサー

非標準のメソッドが使われています。
Fileを扱うためには基本FileReaderを使わなければなりません。
それよりもっといいのが、BlobURL化することです。

写真を指定してください:
<form>
<input type=file onChange="this.form.disp.src=window.URL.createObjectURL(this.files[0])">
<br><img name=disp>
</form>


人気Q&Aランキング

おすすめ情報