チェックボックスを複数選択したら文字を表示したい

質問

フォームを作っています。チェックボックスがいくつかあるのですが特定のボックスをクリックしたら、別のテキストエリアにメッセージを表示したいのですが、可能ですか？

たとえば、ボックスA～Gのうち、BとDが選択されたら、"etc"というテキストエリアに「ようこそ」と表示する。

できれば、ボックスを選択しただけで、表示してくれると最高にうれしいのですが。

ぜひ教えてください。

回答No.1

yambejp · ベストアンサー

＞BとDが選択されたら、"etc"というテキストエリアに「ようこそ」と表示する。

選択が外れた場合は、消すのでしょうか？

<script>
function check(obj){
var f=obj.form;
f.elements["etc"].value=(f["B"].checked && f["D"].checked)?"yokoso":"";
}
</script>
<form>
<p>
A:<input type="checkbox" name="A" />
B:<input type="checkbox" name="B" onclick="check(this)" />
C:<input type="checkbox" name="C" />
D:<input type="checkbox" name="D" onclick="check(this)" />
E:<input type="checkbox" name="E" />
F:<input type="checkbox" name="F" />
G:<input type="checkbox" name="G" /><br />
ETC:<textarea name="etc"></textarea>
</p>
</form>

補足

babu_babooさん、yambejpさん、ありがとうございます。
yambejpさんの言われる通り、選択が外れた場合、表示を消したいので、yambejpさんの文を参考にさせていただこうかと思います。

実は、全ての入力が完了後、
<INPUT TYPE="button" VALUE="送　信" onClick="return check();">
<INPUT TYPE="reset" VALUE="やり直し" onClick="ResetForm();"><br />
が入れてあり、情報をメール送信する様にしてあるのですが、この"送　信"を使っているのですが、ボタンを押しても反応しなくなってしまいました。
ちなみに"やり直し"は全ての入力内容が正しく消えます。

なにか、追加する事があるのでしょうか。

回答No.10

fujillin

No4です。

＞function check(obj){ ・・・ → checkをcopyに変更し～
そうなるのではないかと想像して、書いたつもりだったんだけど…?

補足

そういう事でしたか・・・
理解不足ですみませんでした。

皆様、どうもありがとうございました。

回答No.9

babu_baboo

さらっとながめてたんだけど
/* 取消しボタン押下時の初期化処理 */
function ResetForm() {
　～
　lag = false;//←ここがきになる！
　～
}

flag = false なのではなかろうか？

補足

できました!!でもこれでいいのでしょうか?

最初に教えていただいた、
function check(obj){ ・・・ → checkをcopyに変更し、
以下もcopy(this)に変更しました。
B:<input type="checkbox" name="B" onclick="check(this)" />
D:<input type="checkbox" name="D" onclick="check(this)" />

そしたら、動作しました。

回答No.8

babu_baboo

ついでにHTMLも！
もう<form></form>のなかだけでいいよ！たぶん^^;

補足

それが・・・
これもやたらめったら長くて・・・

この規定文字数におさまらないんです・・・どうしよう・・・

回答No.7

babu_baboo

こーどをぜんぶみせてもらったほうが、めいかいなかいとうが
つきやすいとおもふ。

ちぇっくぼっくすのぷろぐらむと、そうしんまえちぇっくのぷろぐらむが
いっしょになってる？とか

補足

長くなってすみません。
以下の様なやつです。よろしくお願いいたします。

<script Language=javascript>
<!--

/* 送信前確認メッセージ */
flag = false;
function check(){
　 if(window.confirm('送信します！ よろしいですか？')){ // 確認ダイアログを表示
//if (flag) { alert("このデータは、既に送信済みです。送信をキャンセルしました"); return false; }
//flag = true;
document.RequestForm.submit();
return true;
}else{
window.alert('キャンセルしました');
return false;
}
}

/* ページ読込み処理：有効/無効チェック */
function LoadFunc() {
var chk1 = document.getElementsByName("henko");
var o = document.getElementsByName("henko_item");
var i;
var len = o.length;
if (chk1[0].checked == true) {
for(i=0;i<len;i++) {
o[i].disabled = false;
}
} else {
for(i=0;i<len;i++) {
o[i].checked = false;
o[i].disabled = true;
}
}
　TelChk();
}

/* 別の宛先の表示/非表示 */
function show(inputData) {
var objID=document.getElementById( "layer_" + inputData );
var buttonID=document.getElementById( "category_" + inputData );

if(objID.className=='close') {
objID.style.display='block';
objID.className='open';
document.RequestForm.Tel_chk.checked = true
}else{
objID.style.display='none';
objID.className='close';
document.RequestForm.Tel_chk.checked = false

}
}

/* 取消しボタン押下時の初期化処理 */
function ResetForm() {
var chk1 = document.getElementsByName("henko");
var o = document.getElementsByName("henko_item");
var i;
var len = o.length;
for(i=0;i<len;i++) {
o[i].checked = false;
o[i].disabled = true;
}
lag = false;

var objID=document.getElementById( "layer_1" );
　objID.style.display='none';
　objID.className='close';
}

/* 電話Noの自動コピー */
function TelCopy() {
var TelTemp = document.RequestForm.Tel.value;
TelTempDim = TelTemp.split("-");
document.RequestForm.Tel_1.value = TelTempDim[0];
document.RequestForm.Tel_2.value = TelTempDim[1];
document.RequestForm.Tel_3.value = TelTempDim[2];
}

/* 相違のチェック確認 */
function TelChk() {
var objID=document.getElementById( "layer_1" );
if (document.RequestForm.Tel_chk.checked) {
//alert(document.RequestForm.Tel_chk.checked); //TRUE ：checkされている時
objID.style.display='block';
objID.className='open';
} else { //False：checkされていない時
//alert(document.RequestForm.Tel_chk.checked);
objID.style.display='none';
objID.className='close';
}
}

/* etcへのテキスト追加確認 */
function check(obj){
var f=obj.form;
f.elements["etc"].value=(f["b"].checked && f["d"].checked)?"おはよう":"";
}

//-->

</script>

回答No.6

babu_baboo

ちなみに
if (40 === ptn) document.getElementsByName('etc')[0].value ='おは～';
を
document.getElementsByName('etc')[0].value = (40 === ptn) ? 'おは～': '';
にするといいかも？

補足

こんな事が参考になるのかどうかわかりませんが、
/* 送信前確認メッセージ */
の、記述の前に教えてもらったものを加えると、"b"と"d"のチェックボックスをクリックすると送信メッセージが表示されました。

他のチェックボックスでは表示されません。

回答No.5

babu_baboo

flag = false;
function check(){
　if (flag) {
　　alert("このデータは、既に送信済みです。送信をキャンセルしました");
　} else {
　　flag = window.confirm('送信します！ よろしいですか？');
　　if (! flag) alert('キャンセルしました');
　}
　return flag;
}

そうしんされない？どこかでflagがtrueになってるのかな？
ぐろ～ばるへんすうだからなぁ～～

回答No.4

fujillin

おまけで…

＞onClick="return check();"
のcheck()は内容チェックのためのファンクションで、No1様のcheck(obj)と違う場合は、名前がかぶらないように注意。
もし、同じものを呼びたいのであれば（同じものなら、呼ぶ必要はないと思うが）、引数をセットしてあげる必要がある。

まぁ、returnを指定しているのだから、別のファンクションなんだと思うが…

回答No.3

babu_baboo

<INPUT TYPE="button" VALUE="送　信" onClick="return check();">
するんじゃなくて～～～ぇ～～～ぇ～、
<INPUT TYPE="submit" VALUE="送　信">
にして
<form onSubmit="return check();">
に、すれば～～～～ぁ～～ぁ、
なんだかいけそうなきがする～～～？　

ばぶ～

補足

だ、だ、駄目でした～

付け足し付け足しで申し訳ありません。
実行後に以下のチェックが入っていました。

/* 送信前確認メッセージ */
flag = false;
function check(){
　 if(window.confirm('送信します！ よろしいですか？')){ // 確認ダイアログを表示
//if (flag) { alert("このデータは、既に送信済みです。送信をキャンセルしました"); return false; }
//flag = true;
document.RequestForm.submit();
return true;
}else{
window.alert('キャンセルしました');
return false;
}
}

回答No.2

babu_baboo

びっとしふとをつかうってのはどうかな？ばぶぅ～！
<form>
<p onClick="

var chk = this.getElementsByTagName('INPUT');
var cnt = 0;
var obj;
var ptn = 0;

while (obj = chk[cnt++]) if ('checkbox' === obj.type) ptn = ptn << 1 | obj.checked;
if (40 === ptn) document.getElementsByName('etc')[0].value ='おは～';

">
A(64):<input type="checkbox" name="A">
B(32):<input type="checkbox" name="B">
C(16):<input type="checkbox" name="C">
D(8):<input type="checkbox" name="D">
E(4):<input type="checkbox" name="E">
F(2):<input type="checkbox" name="F">
G(1):<input type="checkbox" name="G">
</p>
ETC:<textarea name="etc"></textarea>
</form>