WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:checkboxのon/offで背景色変更

0:[投稿] umi [2003/12/08 19:08 ][環境:IE6,Win2000 不明]

はじめまして。javascriptを勉強し始めてまだ3ヶ月足らずの者です。
複数のチェックボックスがあり、それぞれを下記のようにしています。
(チェックボックスの数は変動します。)
<table>
    <tr><td><input type="checkbox"></td><td>チェック1</td></tr>
    <tr><td><input type="checkbox"></td><td>チェック2</td></tr>
    <tr><td><input type="checkbox"></td><td>チェック3</td></tr>
</table>
そこで、
1、一つのチェックボックスをonにすると、チェックボックス自身と文字の背景色を同色に変更し、
offにすると元の背景色に戻る。すべてに対して同じように動作をさせたい。
2、全選択解除ボタンを設けて、ボタンをクリックするとすべてのチェックボックスoffになり背景色も元に戻る。
以上のことを実現させたいと思っています。IE6以上で動作できればいいのですが。。。
良い方法がありましたら、どなたか教えてください。
よろしくお願いします。


1:[回答]      [2003/12/08 22:08 ]

> はじめまして。javascriptを勉強し始めてまだ3ヶ月足らずの者です。

3ヶ月も勉強していてこれぐらい分からないはず無いだろ。


2:[回答] [2003/12/08 22:30 ]

>>1
狭い。


3:[回答] 薫 [2003/12/08 22:55 ]

検索のコツもそろそろ覚えましょう。
やりたいこと(背景色変更)+言語(javascript)をキーワードに。


4:[回答]      [2003/12/08 23:36 ]

2chでこの人みたいな書き込みあったな。
自分の学校の宿題を質問風に書いてまるまる教えてもらうっていう手口。
勉強する気も無く、「こういうの作って」っていう書き込み。


5:[回答] umi [2003/12/09 19:30 ]

大変失礼しました。
下記のようにスクリプトはいろいろ試して作っていたのですが、まずこちらを見ていただければよかったです。すみませんでした。
<label>を用いてみたのですが、なぜか見た目が悪くなり思うような結果になりませんでした。
よろしくお願いいたします。

<html>
<head>
<title></title>
</head>
<script type="text/javascript">
<!--
var DefaultColorCheckbox = "#CBDBF0"; //初期状態
var ChangedColorCheckbox = "#EFCCF0"; //変更後

function BgChange(){
    for(i=0; i<document.frm.chk.length; i++){
     if(document.frm.chk[i].checked){
       document.frm.chk[i].style.backgroundColor = ChangedColorCheckbox;
   }
   else{
       document.frm.chk[i].style.backgroundColor = DefaultColorCheckbox;
   }
 }
}

function Clear(){
    document.frm.reset();
    for(i=0; i<document.frm.chk.length; i++){
     if(document.frm.chk[i].checked){
            document.frm.chk[i].style.backgroundColor = ChangedColorCheckbox;
        }
   else{
            document.frm.chk[i].style.backgroundColor = DefaultColorCheckbox;
        }
 }
}
-->
</script>

<body>

<form name="frm">
<table bgcolor="#CBDBF0">
   <tr id="aaa"><td><input type="checkbox" name="chk" onClick="BgChange()"></td><td>aaa</td></tr>
   <tr id="bbb"><td><input type="checkbox" name="chk" onClick="BgChange()"></td><td>bbb</td></tr>
   <tr id="ccc"><td><input type="checkbox" name="chk" onClick="BgChange()"></td><td>bbb</td></tr>
</table>
</form>

<input type="button" value="Reset" onClick="Clear()">

</body>
</html>


6:[回答] やちまた [2003/12/10 08:44 ]

<td> の背景色と <input type="checkbox"> の背景色とで同期を取れば良いと思います。


7:[回答] ミツ [2003/12/10 12:47 ]

> <label>を用いてみたのですが、なぜか見た目が悪くなり思うような結果になりませんでした。
見た目がいいとか悪いとか・・だけではいまいち伝わらないかも。
どうなれば思ったとおりなんでしょう?

>チェックボックス自身と文字の背景色を同色に変更し
が、セルの背景としたいならやちまたさんのいうとおり、セルの背景を書き換えればよいかと思います。
また同じ段の全てのセルの背景を書き換えたいなら・・・

次のようなスタイルを用意しておき
tr.checkoff td {background:#EFCCF0}
tr.checkon td {background:"#CBDBF0}

trのclassNameを書き換えるようにするとよいかと。


8:[回答] ミツ [2003/12/10 12:52 ]

タイプミス・・・
tr.checkon td {background:"#CBDBF0} じゃなくて
tr.checkon td {background:#CBDBF0} でした

あと、別件ですが</head> の位置が変ですよ。


9:[完了] umi [2003/12/11 13:33 ]

遅くなりまして申し訳ありません。

やちまたさん、ありがとうございます。
早速試してみます。

ミツさん、ありがとうございます。
重ね重ね説明不足ですみません。以後気をつけます。
スタイルを使用する方法もぜひ試したいと思います。

出来次第ご報告させていただきます。ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World