FORMのチェックボックスで10個のうち5個しかチェックできないようにするには？

[上に] [前に] [次に]
一郎 [E-Mail] 1998/11/22(日) 00:04:52
FORMのアンケートでチェックボックスを使おうと思うのですが
たとえば、10個あるチェックボックスのうち、5個までしかチェック
できないようにしたいんですが、可能でしょうか？
Tiot [E-Mail] [HomePage] 1998/11/22(日) 00:32:20
面倒なので４つになっていますが、適当にかえてしまってください。
cgi側で制御するとか、ほかにもやり方はあると思います。
<script language="JavaScript">
function check() {
var j=0;
for(i=0; i<4; i++) {
if(document.form1.elements[i].checked) {
j++;
}
}
if (j>2) {
alert("だめ");
return false;
} else {
return true;
}
}
</script>

<FORM NAME=form1 onSubmit="return check()" ACTION="hoge.cgi">
<INPUT TYPE=checkbox NAME="CBOX1">チェックボタン１
<INPUT TYPE=checkbox NAME="CBOX2">チェックボタン２
<INPUT TYPE=checkbox NAME="CBOX3">チェックボタン３
<INPUT TYPE=checkbox NAME="CBOX4">チェックボタン４
<INPUT TYPE=submit value="submit">
</form>
一郎 [E-Mail] 1998/11/22(日) 01:14:49
Tiotさんありがとうございます。
しかし、なぜかうまくいきません
うまくいく時と、いかない時があります。
数が増える時は、for(i=0; i<4; i++) の4を5に変えるだけですよね？
上のソースをそのまま使ってもうまくいきません。
それと、他にもテキストボックスやラジオボタンなどの複数のアンケート
を入れる場合はやはり最後まで行ってsubmitを押すまでわからないのでしょうか？
すいませんがよろしくおねがいします。
Tiot [HomePage] 1998/11/22(日) 11:23:13
どういう時にうまくいって、どういう時にだめでしたか？
NN4.05とIE3.0でチェックする限り、こちらではうまく動いていますが。
私のかいたスクリプトはチェックするエレメントが最初から順に
並んでいることを前提にしているので、もしそうでなければ
for(i=5; i<10; i++) {
↑5個めから、10個めをチェックとかいうように変えてください。
許可する個数を変えるのなら
if (j>2) {
を変えてください。
|最後まで行ってsubmitを押すまでわからないのでしょうか？
チェックボックスに、onClickなどのイベントハンドラをつけて、
選択されるたびに選択個数のチェックをするようにすれば、
いいのでは。
Tiot 1998/11/22(日) 15:47:21
|↑5個めから、10個めをチェック
6個めから、の間違いです。失礼しました。
一郎 [E-Mail] 1998/11/24(火) 12:08:32
Tiotさんたびたびすいません。ありがとうございます。
「onClickなどのイベントハンドラをつけて〜」
のところがよくわからず、Javaの本を購入して調べましたが、
Javaの事はやはりよくわかりません。
申し訳ありませんが、もうすこし教えていただけないでしょうか？
それか、Javaの「これを読め！」という本があれば
教えていただけば、もうすこし自分で頑張ってみようと思います。
よろしくお願いします。
Tiot [HomePage] 1998/11/24(火) 19:23:20
ええと、onClickを使わない場合（最後に検査する場合）は
うまくいったと考えてしまっていいのでしょうか。
ちなみに、Javaじゃなくて、JavaScriptだったりします。
この2つは名前は似てても、中身は全然違うので注意が必要です。
＃もともとLiveScriptとか言ってたものを、Javaの流行にあわせて、
＃名前をかえたそうです。まぎらわしいなぁ。
とほほさんの解説が↓にあります。
http://www.tohoho-web.com/js/index.htm
本だったら、私は最初は技術評論社のInternet Languageというシリーズの
2巻で勉強しました。特にこの本が良かったという訳ではありませんが、
ちょっとやってみるのには適しているかもしれません（内容が多少古い）。

簡単に説明すれば（ものすごくいい加減です）
イベントハンドラというのは、ユーザの反応（マウスのクリックなど）
に応じて何かやるというものです。
どんな動作に応じてどんな事をするかというのを
onClick（マウスでクリックされたら）="kensa()"（kensa()という関数を実行）
のように指定します。
今回の場合は、チェックボックスがチェックされるたびに、
チェックされた合計数を数えて、多すぎれば警告するというようにします。

<script language="JavaScript">
function check() {
var j=0;
for(i=0; i<4; i++) {
if(document.form1.elements[i].checked) {
j++;
}
}
if (j>2) {
alert("だめ");
return false;
} else {
return true;
}
}
</script>

<FORM NAME=form1 onSubmit="return check()" ACTION="hoge.cgi">
<INPUT TYPE=checkbox NAME="CBOX1" onClick="kensa()">チェックボタン１
<INPUT TYPE=checkbox NAME="CBOX2" onClick="kensa()">チェックボタン２
<INPUT TYPE=checkbox NAME="CBOX3" onClick="kensa()">チェックボタン３
<INPUT TYPE=checkbox NAME="CBOX4" onClick="kensa()">チェックボタン４
</FORM>
以前ののスクリプトでは最後に、サブミットボタンを押されたときだけ検査されていたものを（onSubmit）、それぞれのチェックボックスをクリックされたとき（onClick）にも検査するようにしたものです。
詳しい解説は先にあげたものなどを、参照してください。長文で失礼します。
Tiot [HomePage] 1998/11/24(火) 19:24:29
うえのとほほさんのURLを間違えてしまいました。申し訳ありません。
http://www.tohoho-web.com/js/index.htm
一郎 [E-Mail] 1998/11/25(水) 04:04:44
[[解決]]
Tiotさん何度もご親切にありがとうございました。
参考にさせていただいて、自分でももう少し勉強してみようと思います。
本当にありがとうございました。
[上に] [前に] [次に]