NTT-X Store d払いご利用でdポイントが貯まる使える!

初めての投稿ですが、よろしくお願いします。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テーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Q複数のsubmitボタンで押されたボタンを取得する方法

form内の、submitボタンの値が拾えません。
1つだけsubmitボタンを設置すると値が拾えますが、
2つ以上submitボタンを設置すると拾えません。
仕様上、無理なのでしょうか?

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.btn.value);
}
</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1">
<INPUT type="submit" name="btn" value="テスト2">
<INPUT type="submit" name="btn" value="テスト3">
</form>

Aベストアンサー

> alert(document.frmMvPost.btn.value);

btnというオブジェクトが複数あるため、btnは配列になってしまうため、
document.frmMvPost.btn.valueでは値が取れません。

回避策はonClickイベントにて値をHiddenへ格納すればOKです。

_____________________________________________________________

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.onbtn.value);
}

function set_value(s_val)
{
document.frmMvPost.onbtn.value = s_val;
}

</SCRIPT>

<FORM name="frmMvPost" action="" method="post" onsubmit="return move_post()">
<INPUT type="submit" name="btn" value="テスト1" onClick="set_value('テスト1')">
<INPUT type="submit" name="btn" value="テスト2" onClick="set_value('テスト2')">
<INPUT type="submit" name="btn" value="テスト3" onClick="set_value('テスト3')">
<INPUT type="hidden" name="onbtn">
</form>

_____________________________________________________________


※テストしていないため動作は保証しません。問題ある場合にはお手数ですが何かしら手を加えてください。

> alert(document.frmMvPost.btn.value);

btnというオブジェクトが複数あるため、btnは配列になってしまうため、
document.frmMvPost.btn.valueでは値が取れません。

回避策はonClickイベントにて値をHiddenへ格納すればOKです。

_____________________________________________________________

<SCRIPT language="JavaScript">
function move_post(){
alert(document.frmMvPost.onbtn.value);
}

function set_value(s_val)
{
document.frmMvPost.onbtn.value = s_val;
}

</SCRIPT...続きを読む

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Qsubmitとは?

超初心者レベルな質問なんですが、「submit」とはどういう意味でしょうか?
いろいろ調べたのですが、当たり前のように「サブミット」という言葉が使われていて、正確な意味がわかりません。
どうも、画面遷移とかイベント発生時に情報を送るというような感じなのかな?と思っているのですが、正しくは、どういう時に使用するものなんでしょうか。

Aベストアンサー

Javaというより、HTML、JavaScriptの言葉になります。
HTMLのformタグの内容をサーバに送信するボタンや送信する動作のことを言います。

最近、Javaを使用する場合は、Servletを使用したWebアプリを作る場合がほとんどなので、HTMLの内容がJavaのプログラムや参考書にでてきているんだと思います。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qselectタグに直接onChangeを書かないイベント取得方法

javascriptが余り詳しくないので困っています。

<select id="select1" name="select1">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
</select>

このようなselectの選択リストから値を変更した時にイベントを取得したいのです。
普通に考えると
<select id="select1" name="select1" onChange="xxx">
のようにonChangeを使えば簡単なのですが、
困ってしまうのがこのselectは自動生成されるものなので、
直接手を加えることができないのです。

なのでselect文には手を加えずに、値が変更されたときに
何か関数を呼び出すようなことをしたいのです。

無理ならしょうがないのですが、何か手があれば教えてください。
よろしくお願いします。

Aベストアンサー

イベント処理は後から追加する事もできます。
例えば、そのselectがページ内に一つ(目)であれば
<script type="text/javascript">
window.onload=function(){
Object = document.getElementsByTagName('select')[0];
//↑ページ内のselectの[0]番目を得る
Object.onchenge=function(){onchangeで呼び出したい関数()}
//↑onchangeイベントの処理を追加する
}
</script>

Q3つの表の外部結合

表A、B、Cの3つがあり、Aのすべての行を出力したいと考えています。
外部結合を用いるのだとは思うのですが、3つの表に対して行う場合の
書き方がわからず困っています。
ご教授いただけないでしょうか?
select * from a,b,c
where a.商品ID =b.商品ID (+) and b.商品ID (+) =c.商品ID (+)
としてみましたが、うまくいきませんでした。

Aベストアンサー

ansi構文の趣旨からいえば、結合条件と絞り込み条件は分けて書くので・・

select *
from a
left join b on (a.商品ID =b.商品ID)
left join c on (b.商品ID =c.商品ID)
where a.年月 = 任意の値

と書くのが一般的でしょうね。

Q子→親ウインドウへデータを受け渡し、子ウィンドウを閉じる。

このような処理はできないでしょうか?

子ウィンドウはコード番号の検索用。該当のコードのリンクをクリックすると、そのコード番号を親ウィンドウのテキストボックスへ落とし込む。そのタイミングで、子ウィンドウは閉じる。
子→親ウインドウへのデータの受け渡しと、子ウィンドウのクローズを同時に行うようなイメージです。
よろしくお願いします。

Aベストアンサー

こんにちは

【親ウィンドウ】
<form action="xxx.php" method="POST" name="myForm">
顧客コード
<input type="text" name="kokyaku_cd" size="10">
<a href="javascript:void(0)" onClick="window.open('search.html','search','menubar=no,height=400,width=300');">検索</a>
</form>

【子ウィンドウ】
<script language="javascript"><!--
function ich(n) {
window.opener.document.myForm.kokyaku_cd.value=n;
window.close();
}
//--></script>

<table>
<tr>
<th>顧客コード</th>
<th>顧客名称</th>
</tr>
<tr>
<td><a href="javascript:ich('ABC商店')">0001</a></td>
<td>ABC商店</td>
</tr>
<tr>
<td><a href="javascript:ich('DEF商店')">0002</a></td>
<td>DEF商店</td>
</tr>
</table>

もしくはNo.1様の言うようにidを設定して
【親画面】
<input type="text" name="kokyaku_cd" size="10" id="kokyaku_cd">

【子画面 function内】
window.opener.document.getElementById("kokyaku_cd").value=n;

でできると思います

こんにちは

【親ウィンドウ】
<form action="xxx.php" method="POST" name="myForm">
顧客コード
<input type="text" name="kokyaku_cd" size="10">
<a href="javascript:void(0)" onClick="window.open('search.html','search','menubar=no,height=400,width=300');">検索</a>
</form>

【子ウィンドウ】
<script language="javascript"><!--
function ich(n) {
window.opener.document.myForm.kokyaku_cd.value=n;
window.close();
}
//--></script>

<table>
<tr>
<th>顧客コード</th>
<t...続きを読む

Qtextareaで入力した文字を改行したままで表示したいのですが。

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" >
<textarea cols="30" rows="10" name="textN"></textarea>
<input type="button" value=" 確認 " onClick="check()">
</FORM>
<DIV id="test" style="position:absolute;font-size:24px;">
</DIV>
</BODY>
</HTML>

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" ...続きを読む

Aベストアンサー

function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
//一応タグを使えないように置き換える
strName = strName.split("<").join("&lt;");
strName = strName.split(">").join("&gt;");
//改行を改行タグに置き換える
strName = strName.split("\n").join("<br>");
test.innerHTML = strName;
}


人気Q&Aランキング