チェックボックスとテキストの値

質問

初心者で勉強中です。できるだけわかりやすくしていただけると助かります。
前提として、
(1)フォーム名：Ａform　フォーム名：Bformと２つのフォームがあります。
(2)Ａformには、Atextというテキストボックスがあります。
(3)Bformには、複数のチェックボックスがあります。
　テキストボックスの名前は、CB１、CB２・・・と連番になっています。
　aspでデータを書き込みながらチェックボックスを作成しているため、チェックボックスの数はその都度変わります。

ここからが質問なのですが…行いたい事は、
(1)チェックボックスは、１つ以外チェックできないようにし、２つ目のチェックでアラートを出し、チェックをできないようにする。
(2)チェックボックスのvalueをAformのAtextにセット
(3)チェックボックスを外した時には、AformのAtextはクリア。
※aformのAtextは、input type＝hidden でもいいと考えています。

現在、調べ調べて、チェックボックスのOnClickで２つ以上でアラートは出て、Atextにも値はセットされるのですが、チェックボックスをクリアした時に、Atext値が残ってしまっています。

どなたか、教えていただけないでしょうか？

回答No.1

yambejp · ベストアンサー

>フォーム名：Ａform　フォーム名：Bformと２つのフォームがあります。

フォームに名前を付けるのは非推奨です。
IDで管理してください。

>(1)チェックボックスは、１つ以外チェックできないようにし、

こういうのはラジオボタンでやることです。

>２つ目のチェックでアラートを出し

アラートを出すのは微妙ですね。
disabledで選べなくすると明示的でよいのでは？
(disabledにするとアラートは出しにくいですけど)

総じてこんな感じでやるとよいかと

<script>
function check(obj){
var Aform=document.getElementById("Aform");
Aform.Atext.value=obj.checked?obj.value:"";

var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="checkbox" && f[i]!=obj) f[i].disabled=obj.checked;
}
}
</script>

<form id="Aform">
Atext:<input type="text" name="Atext" value=""><br />
</form>
<form id="Bform">
<input type="checkbox" name="CB1" id="CB1" onClick="check(this)" value="1のデータ"><label for="CB1">CB1</label><br />
<input type="checkbox" name="CB2" id="CB2" onClick="check(this)" value="2のデータ"><label for="CB2">CB2</label><br />
<input type="checkbox" name="CB3" id="CB3" onClick="check(this)" value="3のデータ"><label for="CB3">CB3</label><br />
</form>

お礼

ありがとうございました！できました！
ちなみに、何故IDで管理する方が良いのでしょうか？
何もわかっていないので、教えて下さいませんか。

回答No.2

yambejp

>何故IDで管理する方が良いのでしょうか？

新しい仕様では廃止されてるからです

http://itpro.nikkeibp.co.jp/article/COLUMN/20061011/250432/

お礼

大変勉強になりました。ありがとうございました。