WEB相談室

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

タイトル:チェックボックスの範囲選択

B-Cus [URL] [WriteDate : Sat Dec 23 21:43:35 2000]

Windows 系アプリ (たとえば Explorer) では、ある
オブジェクトをクリックして選択し、次に別のオブジェクトを
Shift+クリックすると、その間に挟まれたオブジェクトが
全て選択されます。

それと同様なことが、Javascript で可能でしょうか。たとえば
 □ 項目1
 □ 項目2
 □ 項目3
  :
 □ 項目99
 □ 項目100
と、たくさんのチェックボックスが並んでいて、
 □ 項目1
 ■ 項目2
 □ 項目3
  :
 □ 項目99
 □ 項目100
と項目2をチェックし、次に項目99を Shift+クリックすると、
 □ 項目1
 ■ 項目2
 ■ 項目3
  :
 ■ 項目99
 □ 項目100
となってほしいわけです。

Shift が理想ですが、Shift 以外のキーでも構いません。
要は、いちいちチェックを入れたり外したり、という作業を
効率化できればいいです。

よい案がありましたら、教えてください。


andi [WriteDate : Sun Dec 24 00:47:31 2000]

<select>のMULTIPLEは無しですか?

B-Cus [WriteDate : Sun Dec 24 04:02:30 2000]

> <select>のMULTIPLEは無しですか?

なるほど。multiple というのがあるんですか。知りませんでした。

ただ、今回は select はナシで行きたいと思っています。
なぜなら実際は
 □ 項目1 □ [テキストボックス]
    :
 □ 項目100 □ [テキストボックス]
のように、各項目ごとに、
 - 表示/非表示を決めるチェックボックス
 - その項目に従ってソートするか否かを決めるチェックボックス
 - 各項目ごとの条件
など、複数の入力を指定できるようにしたいからです。


で、あれからずっと調べていて、現時点では以下のような状況です。
 - Shift キーが押下されたかどうかは、onkeyup/down イベントを
   拾って、キーコードを見ればよいらしい。Shift キーなら、up/down に
   応じてフラグの ON/OFF を切ろ替える。
 - checkbox のクリック時にはフラグを見て、Shift キーが
   押下中かどうかを判別し、前回チェックした checkbox と、
   今回チェックされた checkbox との間にある checkbox を
   全て ON/OFF にする。

ところが、FreeBSD+NC4.76 では

<html><head><SCRIPT Language="Javascript">
<!--
function keyDown(theEvent) {
 document.MYFORM.KEY1.value = theEvent.modifiers;
 document.MYFORM.KEY2.value = theEvent.which;
}
window.document.captureEvents(Event.KEYDOWN);
window.document.onkeydown=keyDown;
</SCRIPT></head><body>
キー押下テスト
<FORM NAME=MYFORM>
 <INPUT TYPE=TEXT NAME=KEY1>
 <INPUT TYPE=TEXT NAME=KEY2>
</FORM></body></html>

が動かないという、非常に痛い事実がわかりました。
# Windows+NC4では動く。FreeBSD+Mozilla5 も OK。

テキストボックスの中でキーを打つと event が投げられますが、
テキストボックスの外だと event が飛んでこないので、これでは
使いものになりません。

とまぁ長々と書きましたが、これ以外にキー取得の方法が
あれば教えてください。FreeBSD+NC で動くかどうか試して
みますので。

# もちろん、全く別のやり方でも結構です。結局は
# 入力が楽になればよいので。


ふじ [URL] [WriteDate : Sun Dec 24 15:59:10 2000]

<FORM>
ダブルクリック <INPUT type="checkbox" onDblClick="alert(1)">
キー押下(1) <INPUT type="checkbox" onKeyDown="alert(2)">
キー押下(2) <INPUT type="checkbox" onKeyPress="alert(3)">
</FORM>

なんてのでやってみたところ、
NN4.76(Linux) 全て ×
NN4.75(Win) 1 のみ ○
NN6.0(Linux) 全て ○
IE5.01(Win) 全て ○
でした。
FreeBSDは手元にない(というか Xが動かない FreeBSD しかない)
ので実験できませんでしたが。
# うーん、使えない。>NN4 

バギンズ [MAIL] [URL] [WriteDate : Mon Dec 25 14:54:45 2000]

安易な考えですが(^_^;)

方法1.テキストボックスの中だけイベントが有効なら、チェックボックスの代わりにテキストボックスを使う。
クリックされたら「レ」を表示するとか...(見た目悪い(^_^;))

方法2.範囲指定中を示すチェックボックスを別に1つ用意する。(フレームか子ウィンドウで表示しておかないと不便かも)

それにしてもB-Cusさんが質問してふじさんが答えているのってめっちゃレベル高いですね。(^_^;;;)
この結論は皆が注目している気がします。

B-Cus [WriteDate : Tue Dec 26 14:51:25 2000]

> # うーん、使えない。>NN4  

どうもです。うーん、痛い。

> 方法2.範囲指定中を示すチェックボックスを別に1つ用意する。

なるほど。これをやってみて、使いやすければそれでよし、
使いにくければ NN4 は捨てて、Mozilla5 に移行する
ことにします (速いマシン買わんとなぁ)。

> めっちゃレベル高いですね

Javascript を使うのは初めてなので、右も左もわかって
ません。初歩の初歩レベルです。

モノは作ってませんが、一応解決を付けておきます。


B-Cus [WriteDate : Tue Dec 26 14:52:09 2000]

完了し忘れ。


B-Cus [WriteDate : Tue Dec 26 14:52:10 2000]

完了し忘れ。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]