初めての投稿ですが、よろしくお願いします。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チェックボックスの箱のサイズとフォントサイズは変更できるの?

こんにちわ。

エクセル2000でチェックボックスを作成したのですが、
やや、小さいのでサイズを大きくしたいのです。
ボックスサイズ、ボックスの横に入れる文字の
フォントサイズは大きくできるのでしょうか?
もし、できるのなら方法を教えてください。

よろしくおねがいします。

Aベストアンサー

コントロールツールボックスのチェックボックスならプロパティにFontがあるので変更できます。

フォームのチェックボックスやオプションボタンのフォントサイズは変更できなかったと思いますが、変更したように見せかけはできます。使用上、特に問題はないと思います。(だからダイアログにフォントがない?)

チェックボックスの位置によって、
(1)チェックボックス(四角)がセルの中央にある場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 チェックボックス(四角)の右横のセルにチェックボックスの説明のテキストを入れます。
 セルの書式設定でフォントが変更できます。
(2)チェックボックス(四角)をセルの境目などにセットする場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 図形描写からテキストボックスを選択し、チェックボックスの説明のテキストを入れます。
 テキストボックスは『線なし』にしておきます。2行で表示したりもできます。
 チェックボックスとテキストボックスを重ねて、見た目を調節します。
 テキストボックスを選択し、右クリック→順序→最背面へ移動 とします。

ご参考に。

コントロールツールボックスのチェックボックスならプロパティにFontがあるので変更できます。

フォームのチェックボックスやオプションボタンのフォントサイズは変更できなかったと思いますが、変更したように見せかけはできます。使用上、特に問題はないと思います。(だからダイアログにフォントがない?)

チェックボックスの位置によって、
(1)チェックボックス(四角)がセルの中央にある場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 チェックボックス(四角)の右横のセ...続きを読む

QJavaScriptにおいてチェックボックスにチェックをつけるには

すごい初歩的ですいません。。。

document.Form.elements["TEST"].checked

みたいな感じだったと記憶しているのですが、
忘れました。。。どうやったらできますでしょうか??

ちなみにチェックのはずしかたも教えていただければうれしいです。

よろしくお願いします!!!!!

Aベストアンサー

ONするには、
document.Form.elements["TEST"].checked = true ;
OFFするには、
document.Form.elements["TEST"].checked = false ;
でよろしいと思います。

参考URL:http://www.tohoho-web.com/js/form.htm#ElmSelect

Qエクセル チェックボックスの初期値を条件により変更したい。

エクセル チェックボックスの初期値を条件により変更したい。

表題の質問をさせていただきます。

チェックボックスを20個あらかじめ配した以下のような表があります。

A列:社員ID (随時入力)
B列:社員名 (VLOOKUPで表示)
C列:チェックボックスを配置
D列:チェックボックスのリンクするセルに設定

チェックボックスの初期値は空欄(FALSE)にしています。

社員IDを入力した時に、連動してチェックボックスの値を「TRUE」にしてチェックを入れたいのです。
現在は社員ID入力後にチェックボックスをクリックしています。

よろしくお願いいたします。

Aベストアンサー

フォームコントロールのチェックボックスですか?

>社員IDを入力した時に、連動してチェックボックスの値を「TRUE」にしてチェックを入れたいのです。
チェックボックスを使う意味が無くなるように思いますがどうでしょうか。

回答としては、A列セルをリンクするセルに設定してはいけないでしょうか。

QJavaScriptにて、2つのチェックボックスのチェックができません

お世話になっております。
お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか?

現在採用に関する応募フォームを作成しています。

JavaScriptにてフォーム内のチェックボックスに
チェックが入っているか、必須チェックをさせたいと思っています。

テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、
チェックボックスの項目についての必須チェックがうまくいきません。
チェック完了後、cgiにてメールを送信するようにしているのですが、
チェックがされず、メールを送信してしまいます。

ローカルで行ってみたのですが、チェックをスルーして、
cgiに遷移してしまいます。


フォームイメージは以下の感じです。

<応募フォーム>
---------------------------
希望勤務地:□本社 □大阪
---------------------------

2つのチェックボックスどちらにもチェックが入っていない場合は、
エラーメッセージを出し、処理を中止します。
どちらのチェックボックスにもチェックが入っていても、
エラーは出さずにcgiへ遷移します。

以下は現在のコードの内容です。

<HTMLコード>
<form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()">
<input type="checkbox" name="希望勤務地" value="本社" checked>本社
<input type="checkbox" name="希望勤務地" value="大阪">大阪
<input type="submit" value=" 送信 ">
<input type="reset" value=" 取消 ">

<Scriptコード>
function check(){
if(!document.応募フォーム.希望勤務地.value.checked){
flag = 1;
window.alert('必須項目[希望勤務地]にチェックがされていません');
}
}

色々試してみたのですが、うまくいきませんでした。
チェックボックスのnameを同じ名前にしているのが原因でしょうか?

お手数ですが、宜しくお願いいたします。

お世話になっております。
お分かりになる方いらっしゃいましたら、ご教授願えますでしょうか?

現在採用に関する応募フォームを作成しています。

JavaScriptにてフォーム内のチェックボックスに
チェックが入っているか、必須チェックをさせたいと思っています。

テキストボックスやコンボボックスなど、いくつか必須チェックがある中で、
チェックボックスの項目についての必須チェックがうまくいきません。
チェック完了後、cgiにてメールを送信するようにしているのですが、
チェックがされず、...続きを読む

Aベストアンサー

同名のオブジェクトをつかうならこんな風にします。

<script>
function check(obj){
var flag = true;
if(!obj.elements["希望勤務地"][0].checked && !obj.elements["希望勤務地"][1].checked){
alert('必須項目[希望勤務地]にチェックがされていません');
flag= false;
}
return flag;
}
</script>
<form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check(this)">
<input type="checkbox" name="希望勤務地" value="本社" checked>本社
<input type="checkbox" name="希望勤務地" value="大阪">大阪
<input type="submit" value=" 送信 ">
<input type="reset" value=" 取消 ">
</form>

同名のオブジェクトをつかうならこんな風にします。

<script>
function check(obj){
var flag = true;
if(!obj.elements["希望勤務地"][0].checked && !obj.elements["希望勤務地"][1].checked){
alert('必須項目[希望勤務地]にチェックがされていません');
flag= false;
}
return flag;
}
</script>
<form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check(this)">
<input type="checkbox" name="希望勤務地" value="本社" checked>本社
<input type...続きを読む

Qエクセル 複数のチェックボックスをリンクさせる

こんにちは、エクセル2010を使っています。

チェックボックスについて、解らない事が出てきましたので、教えて頂けませんでしょうか。

book1とbook2にチェックボックスがあります。

本来利用するのは、Book1のチェックボックスなのですが、Book2に作ったチェックボックスにチェックを入れると、Book1のチェックボックスにもチェックが入るようにしたいのです。

詳しい方、教えて頂けませんでしょうか。

よろしくお願い致します。

Aベストアンサー

以下のような手順で、2つのチェックボックスのリンクするセルを同一のセルにします。

ご使用のチェックボックスがフォームのチェックボックスなら、Book1のチェックボックスをで右クリックして「コントロールの書式設定」で「リンクするセル」を指定します。
Book2のチェックボックスで右クリックしてチェックボックスを選択し、数式バーに「=」と入力し、Book1のリンクするセルを選択します(これで「=[Book1]Sheet3!$A$3」のような他ブックを参照する数式になります)。

Qチェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい

このようなアンケートがあるとします。

//アンケートスタート

●Q1 あなたはJavascriptを使いこなしていますか?
ラジオボタン回答1 使いこなしている
ラジオボタン回答2 あまり使いこなしているといえない
ラジオボタン回答3 ぜんぜん使いこなしていない

●Q2 Q1で「あまり使いこなしているといえない」
「ぜんぜん使いこなしていない」と回答した方のみお答えください。
その理由はどのようなものですか?

チェックボックス回答1 むずかしい
チェックボックス回答2 わかりにくい
チェックボックス回答3 そのほか
テキストフィールド そのほかの理由(       )

【送信ボタン】

//アンケートエンド

■上のアンケートでJavascriptを使用して
次のことをしたいのですが、教えてください。

1.Q1の2と3にチェックがあるのに、
Q2に未回答のままフォームデータを送信しようとした場合に、
アラートを表示させたい

2.Q2で3を選んだ人にもかかわらず、
そのほかの理由テキストフィールドに未記入のまま
フォームデータを送信しようとした場合、
アラートを表示させたい

よろしくお願いします。

このようなアンケートがあるとします。

//アンケートスタート

●Q1 あなたはJavascriptを使いこなしていますか?
ラジオボタン回答1 使いこなしている
ラジオボタン回答2 あまり使いこなしているといえない
ラジオボタン回答3 ぜんぜん使いこなしていない

●Q2 Q1で「あまり使いこなしているといえない」
「ぜんぜん使いこなしていない」と回答した方のみお答えください。
その理由はどのようなものですか?

チェックボックス回答1 むずかしい
チェックボックス回答2 わかりにくい
チェッ...続きを読む

Aベストアンサー

えーと、
まず確認を取っておきたいのですが
SubmitCheck()は該当<form>タグからonSubmitで呼び出しているんでしょうか?
また、regsは該当<form>の名前(name属性の値)ととっていいんでしょうか?
あと、【中略】 の部分にはreturn trueは無いととっていいんでしょうか?

とりあえず上記の条件ととって話を進めると

No2.で僕がやったように
onSubmit="SubmitCheck(this)"
で呼び出して関数名をfunction SubmitCheck(thisform)にしておけば
document.regsはすべてthisformに置き換える事が出来ます。

【中略】の後を

scriptqueshantei = checans(thisform);
return scriptqueshantei;

とすれば問題ないと思います。確認はとってません。

あと複数回答の件ですがはっきりチェックボックスと書いてありましたね。見落としてました。ごめんなさい。

else{
quesumu = checradioon(thisform.ques2);
if(!quesumu){
alert("Q2に答えてください。");
return false;
}
}

if(thisform.ques2[2].checked){
if(thisform.q2else.value==""){
alert("テキスト欄に理由を書いてください。");
return false;

の部分を

else{
quesumu = checques2(thisform);
if(!quesumu){
alert("Q2に答えてください。");
return false;
}
}

if(thisform.q2a3.checked){
if(thisform.q2else.value==""){
alert("テキスト欄に理由を書いてください。");
return false;

に書き換えてください。
そして次の関数を加えてください。

function checques2(thisform){
var checkumua1;
var checkumua2;
var checkumua3;

checkumua1 = thisform.q2a1.checked;
checkumua2 = thisform.q2a2.checked;
checkumua3 = thisform.q2a3.checked;

if(checkumua1 || checkumua2 || checkumua3){
return true;
}
else{
return false;
}
}

本当はchecradioonみたいに流用の利く関数にしたかったんだけど難しそうだったんで特化したものにしました。
ちなみにQ2のname属性の値はid属性のそれと同じものに変えてあります。

えーと、
まず確認を取っておきたいのですが
SubmitCheck()は該当<form>タグからonSubmitで呼び出しているんでしょうか?
また、regsは該当<form>の名前(name属性の値)ととっていいんでしょうか?
あと、【中略】 の部分にはreturn trueは無いととっていいんでしょうか?

とりあえず上記の条件ととって話を進めると

No2.で僕がやったように
onSubmit="SubmitCheck(this)"
で呼び出して関数名をfunction SubmitCheck(thisform)にしておけば
document.regsはすべてthisformに置き換える事が出来ます。

...続きを読む

QExcelのチェックボックスについて教えてください

Excel2003使用者です。

今顧客リストを作成しているのですが、
A列にフォームでチェックボックスを入れていて、簡単にはこんな感じになっています。
   A       B    C   D  ・・・
1 チェックボックス 顧客名 部署 住所 ・・・

営業が訪問した先のチェックボックスにチェックを入れるようになっています。
これをオートフィルタ機能で、チェックをつけたところとつけてないところでフィルタをかけたいのですが、
全て「空白セル」としてフィルタがかかりません。
またオートフィルタをかけるとチェックボックスが寄ってしまいます。

フォームではダメなのかと思って、コントロールツールボックスでチェックボックスを作成したのですが、
それもダメでした。

どなたか解決方法を教えていただけないでしょうか。

オートフィルタでチェックボックスにチェックしたものだけを表示させることはできないのでしょうか。
もしマクロを組まないといけないのでしたら、マクロ初心者なため、
出来ればコードも教えていただきたく、
また、オートフィルタをかけた際にチェックボックスが移動してしまうことも解決したいので、
その点についても教えていただけると幸いです。

お手数ですが、宜しくお願い致します。

Excel2003使用者です。

今顧客リストを作成しているのですが、
A列にフォームでチェックボックスを入れていて、簡単にはこんな感じになっています。
   A       B    C   D  ・・・
1 チェックボックス 顧客名 部署 住所 ・・・

営業が訪問した先のチェックボックスにチェックを入れるようになっています。
これをオートフィルタ機能で、チェックをつけたところとつけてないところでフィルタをかけたいのですが、
全て「空白セル」としてフィルタがかかりません。
またオートフィルタを...続きを読む

Aベストアンサー

オートフィルタで出し入れというか,行の畳み込み・再表示に追従させるには,フォームではなくコントロールツールボックスのチェックボックスを利用する必要があります。

しかしコントロールツールボックスを使うときは,必ずコントロールツールボックスツールバーの「デザインモード」ボタン(青い三角定規)の状態を意識して
○デザインモードが選択されている状態で配置や設定する
○実際にシートを使うときはデザインモードを必ずオフにする
ことに注意が必要です。

デザインモードに入った状態で,
コントロールツールボックスのチェックボックスを配置,右クリックしてコントロールの書式設定のプロパティで「セルに合わせて移動変形する」にマークします。
全てのチェックボックスについて,漏れなく設定をします。



次に,チェックボックスの状態をオートフィルタで出し入れするには,チェックボックスの状態をセルにデータとして記入させておかないといけません。
そうしとかないと,それこそ「オートフィルタの図形の○や□をオートフィルタで絞りたい」と言ってるようなモノです。

そのためコントロールツールボックスのチェックボックスでは
 デザインモードに入る
 コントロールツールボックスツールバーのプロパティボタンでプロパティパネルを出す
 チェックボックスを選択する
 LinkedCellという欄に,チェックボックスが配置されたセルの番地を
 A2
 のように記入する

 同じようにA3に配置したチェックボックスのプロパティのLinkedCellに,A3と設定する
 以下同文

全てのチェックボックスのLinkedCellの設定を終えたら,デザインモードを終了する
チェックボックスを操作すると,それぞれリンクするセルにTRUEやFALSEの表示が現れることを確認する
必要に応じてそれらのセルのフォントの色を「白」(あるいはセルの塗り色と同じ)にしておく

以上の準備で,オートフィルタによって「TRUE」や「FALSE」を絞り込んでください。

オートフィルタで出し入れというか,行の畳み込み・再表示に追従させるには,フォームではなくコントロールツールボックスのチェックボックスを利用する必要があります。

しかしコントロールツールボックスを使うときは,必ずコントロールツールボックスツールバーの「デザインモード」ボタン(青い三角定規)の状態を意識して
○デザインモードが選択されている状態で配置や設定する
○実際にシートを使うときはデザインモードを必ずオフにする
ことに注意が必要です。

デザインモードに入った状態で,
コントロ...続きを読む

Q【JavaScript】指定箇所に文字列挿入の方法

★文字列1★文字列2★文字列3★文字列4★文字列5★文字列6★文字列7★

上記のような文字列で「文字列」の部分はどんな文字が入っているかわかりません。
★の数は決まっていて文字列は★に挟まれています。

例えば「文字列4」の部分に任意の文字列例えば「あああ」を挿入したい場合どうすればよろしいでしょうか。
例:★文字列1★文字列2★文字列3★あああ文字列4★文字列5★文字列6★文字列7★
文字列4の先頭に挿入したい場合、4つ目の★の後に文字列を挿入するとすれば良いと思っています。

例:★文字列1★文字列2★文字列3★文字列4あああ★文字列5★文字列6★文字列7★
文字列4の後ろに挿入したい場合、5つ目の★の前に文字列を挿入するとすれば良いと思っています。

上記をJavaScriptで行うにはどう書けばよいでしょうか。
ご教授お願いします。

Aベストアンサー

function 指定箇所に文字列を挿入(str, sepa, index, pref, suff) {
var a = str.split(sepa);
a[index] = pref + a[index] + suff;
return a.join(sepa);
}
var s = '★文字列1★文字列2★文字列3★文字列4★文字列5★文字列6★文字列7★';
var s1 = 指定箇所に文字列を挿入(s, '★', 4, 'あああ', ''); // ... ★あああ文字列4★ ...
var s2 = 指定箇所に文字列を挿入(s, '★', 4, '', 'あああ'); // ... ★文字列4あああ★ ...

Qエクセルのチェックボックスについて教えて下さい

「OK」と言うチェックボックスを「10」作成します。

すべてOKの場合、OKを10回クリックしてOKの欄を
埋めるのではなく、どこか一つのチェックボックスをクリック
すると全てのチェックボックスにレ点が挿入できるようにしたい
です。

チェックボックスを作成するまでは出来ます。
解決方法を教えて下さい。

Aベストアンサー

10個のうちのどれかで、全てを・・・というのは、皆さんが指摘されて
いるように、矛盾しており、個別指定もできません。
そこで、11個目のチェックボックスで、全選択・全解除をするのサンプルを紹介します。
1)1~10のチェックボックスのリンク先セルをB1~10に設定しておきます。
2)11個目のチェックボックスのリンク先セルをC1に設定します。
3)11個目のチェックボックスを選択し、右クリックし、「マクロの登録」
「新規作成」を選択します。
4)以下のマクロを Sub チェックxx_Click()の次の行に追加します。

Range("B1").Value = Range("C1").Value
Range("B2").Value = Range("C1").Value
Range("B3").Value = Range("C1").Value
Range("B4").Value = Range("C1").Value
Range("B5").Value = Range("C1").Value
Range("B6").Value = Range("C1").Value
Range("B7").Value = Range("C1").Value
Range("B8").Value = Range("C1").Value
Range("B9").Value = Range("C1").Value
Range("B10").Value = Range("C1").Value

10個のうちのどれかで、全てを・・・というのは、皆さんが指摘されて
いるように、矛盾しており、個別指定もできません。
そこで、11個目のチェックボックスで、全選択・全解除をするのサンプルを紹介します。
1)1~10のチェックボックスのリンク先セルをB1~10に設定しておきます。
2)11個目のチェックボックスのリンク先セルをC1に設定します。
3)11個目のチェックボックスを選択し、右クリックし、「マクロの登録」
「新規作成」を選択します。
4)以下のマクロを Sub チェックxx_Clic...続きを読む

QJavaScript ボタンで指定の箇所を変更する方法

よろしくお願いします。m(_ _)m

現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。

【やりたい事】
1.ボタンを作りたい
水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり
もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。(水色→紫色→赤色→水色→紫色→・・・)

2.行単位・列単位で一括で変更したい
縦1、または横1などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたい

という事を行いたいと思い、色々調べてみたのですが、
発見できませんでしたので質問させていただきました。
どうかお助けください。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>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td>
<td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td>
<td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td>
</tr>
<tr>
<td>横1
<input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/>
</td>
<td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
<tr>
<td>横2
<input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/>
</td>
<td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
<tr>
<td>横3
<input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/>
</td>
<td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
</table>
</form>

よろしくお願いします。m(_ _)m

現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。

【やりたい事】
1.ボタンを作りたい
水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり
もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。(水色→紫色→赤色→水色→紫色→・・・)

2.行単位・列単位で一括で変更したい
縦1、または横1などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたい

という...続きを読む

Aベストアンサー

なんか効率わるい書き方になってしまいましたが
フローとしてはだいたいこんなもんでは?

<HTML>
<HEAD>
<style type="text/css">
input.aqua{
height:15px; width:15px; background-color:22bbff;
}
input.purple{
height:15px; width:15px; background-color:cc55ee;
}
input.red{
height:15px; width:15px; background-color:ff3300;
}
</style>
<script type="text/javascript">
function rotateColor(obj){
var c=obj.className;
if(c.match(/aqua/)) c=c.replace(/aqua/,"purple");
else if(c.match(/purple/)) c=c.replace(/purple/,"red");
else if(c.match(/red/)) c=c.replace(/red/,"aqua");
obj.className=c;
}
function changeColors(obj,cls){
var c=obj.className.match(/(aqua|purple|red)/)[1];
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
var cc=tags[i].className;
if(cc.match(RegExp(cls))){
cc=cc.replace(/(aqua|purple|red)/,c);
tags[i].className=cc;
}
}
}
</script>
</HEAD>
<BODY>
<form>
<table border="1">
<tr>
<td>一覧</td>
<td>縦1<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col1');" /></td>
<td>縦2<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col2');" /></td>
<td>縦3<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col3');" /></td>
</tr>
<tr>
<td>横1
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row1');" />
</td>
<td><input type="button" class="col1 row1 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row1 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row1 aqua" onclick="rotateColor(this);" /></td>
</tr>
<tr>
<td>横2
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row2');" />
</td>
<td><input type="button" class="col1 row2 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row2 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row2 aqua" onclick="rotateColor(this);" /></td>
</tr>
<tr>
<td>横3
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row3');" />
</td>
<td><input type="button" class="col1 row3 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row3 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row3 aqua" onclick="rotateColor(this);" /></td>
</tr>
</table>
</form>
</body>
</html>

なんか効率わるい書き方になってしまいましたが
フローとしてはだいたいこんなもんでは?

<HTML>
<HEAD>
<style type="text/css">
input.aqua{
height:15px; width:15px; background-color:22bbff;
}
input.purple{
height:15px; width:15px; background-color:cc55ee;
}
input.red{
height:15px; width:15px; background-color:ff3300;
}
</style>
<script type="text/javascript">
function rotateColor(obj){
var c=obj.className;
if(c.match(/aqua/)) c=c.replace(/aqua/,"purple");...続きを読む


人気Q&Aランキング