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

[上に] [前に] [次に]
一郎 [E-Mail] 1998/11/22(日) 00:04:52
FORMのアンケートでチェックボックスを使おうと思うのですが
たとえば、10個あるチェックボックスのうち、5個までしかチェック
できないようにしたいんですが、可能でしょうか?

Tiot [E-Mail] [HomePage] 1998/11/22(日) 00:32:20
面倒なので4つになっていますが、適当にかえてしまってください。
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">チェックボタン1
<INPUT TYPE=checkbox NAME="CBOX2">チェックボタン2
<INPUT TYPE=checkbox NAME="CBOX3">チェックボタン3
<INPUT TYPE=checkbox NAME="CBOX4">チェックボタン4
<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()">チェックボタン1
<INPUT TYPE=checkbox NAME="CBOX2" onClick="kensa()">チェックボタン2
<INPUT TYPE=checkbox NAME="CBOX3" onClick="kensa()">チェックボタン3
<INPUT TYPE=checkbox NAME="CBOX4" onClick="kensa()">チェックボタン4
</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さん何度もご親切にありがとうございました。
参考にさせていただいて、自分でももう少し勉強してみようと思います。
本当にありがとうございました。

[上に] [前に] [次に]