ベストアンサー

TD内のチェックボックスの位置情報(X,Y)を取得するには？

2006/11/15 18:20

お世話になります。マウスドラッグで範囲選択したブラウザ内のチェックボックスに、一括してチェックを入れるWEBアプリケーションを作成しております。そこで、大きく2つ質問があります。 ■質問 1 TABLEのTD内に存在する複数のチェックボックスのうち、特定のチェックボックスの位置情報をonMouseUpで取得したいと思っています。 styleシートで予め各チェックボックスに絶対位置を書いておけば可能かと存じますが、それ以外の方法で、可能なものがあればご教授頂きたいと思います。 ■質問 2 質問 1が前提になるのですが、ブラウザの左上端(0,0)から、onMouseUpで取得したチェックボックスの（x,y）までに含まれる全てのチェックボックスのオブジェクトを取得したいと思っています。これについてもヒント、もしくは参考になるソースなどがございましたら、是非にご紹介頂ければ幸いです。以上になります。よろしくお願い申し上げます。

myosuke
お礼率100% (39/39)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

dennou2000
ベストアンサー率62% (18/29)

2006/11/19 15:25 回答No.2

■質問 1に対する回答 onMouseUpイベントのイベントプロシジャ内で、「eventオブジェクト」を参照すると、そのイベントが発生した座標をプロパティとして参照できます。 event.clientX／ event.clientY：イベント発生時のクライアント座標(タイトルバーを除くウィンドウ内の座標） event.screenX／ event.screenY：イベント発生時の画面上での座標 event.offsetX／ event.offsetY：イベント発生時の要素上の座標 event.pageX／ event.pageY：イベント発生時のページ上の座標 (window.event.～～～で参照した方がいいかも知れません。） ■質問２に対する回答多少工夫がいりますが、できることはできます。１）チェックボックスの定義をnameは同一、idで識別するようにする。　　例：<input NAME=CB ID=01 type=checkbox CHECKED onmouseup=getAll()> 　　　　<input NAME=CB ID=02 type=checkbox CHECKED onmouseup=getAll()> 　　　　<input NAME=CB ID=03 type=checkbox CHECKED onmouseup=getAll()> ２）１）のチェックボックス群は、以下の文でnameが同一の範囲のものは一括取得できます。　　　　document.all("CB") ３）onMouseUpイベントのイベントプロシジャの中で、「eventオブジェクト」を参照すると、その　　イベントが発生したオブジェクトがevent.srcElementプロパティで参照できます。　　これで２）で一括取得したオブジェクトを、左記のevent.srcElementプロパティで得られる　　オブジェクトまでで限定をかけます。試みに書いたＨＴＭＬは、こんな感じです。－－－－－－－－－－－ event.html －－－－－－－－－－－－－－－－－－－－－－－－－ <html> <head> <title>イベントＨＴＭＬ</title> <script language=javascript> function getAll() { 　　var message; 　　var index,CBS; 　　message = "クライアント座標:"+window.event.clientX+"／"+window.event.clientY + "\n" + 　　　　　　　　"スクリーン座標:" +window.event.screenX+"／"+window.event.screenY + "\n"; 　　confirm(message); 　　message = "" 　　CBS = document.all("CB"); // NAME=CBのオブジェクトを全取得　　for(index=0;index<CBS.length;index++) { 　　　　message = message + "\n" + CBS[index].id; 　　　　if(CBS[index]==window.event.srcElement) break; // イベント発生オブジェクトまでで打ち切る　　} 　　confirm(message); } </script> </head> <body> <table border=1> <tr><td>チェックボックス１</td><td><input NAME=CB ID=01 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス２</td><td><input NAME=CB ID=02 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス３</td><td><input NAME=CB ID=03 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス４</td><td><input NAME=CB ID=04 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス５</td><td><input NAME=CB ID=05 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス６</td><td><input NAME=CB ID=06 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス７</td><td><input NAME=CB ID=07 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス８</td><td><input NAME=CB ID=08 type=checkbox CHECKED onmouseup=getAll()></td></tr> <tr><td>チェックボックス９</td><td><input NAME=CB ID=09 type=checkbox CHECKED onmouseup=getAll()></td></tr> </table> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ ※　オブジェクトの取得の方は、厳密には原点座標からの矩形の範囲にあるオブジェクトを　　取得している事にはなりません。　　完全に矩形の範囲で採ろうとする－－例えば、格子状にチェックボックスが並んでいる　　等の場合は、ＩＤの付与の仕方をxxyyの様な形にして、event.srcElementプロパティで　　得られるオブジェクトのＩＤ　XXYYからXX、YYよりも小さい値のＩＤを持つオブジェクト　　に限定するという手法が考えられます。 ≪受付中のままにしないで、ちゃんと質問は締め切りましょう≫

質問者

お礼 2006/11/20 17:46

ご回答有難うございます。お礼遅くなってしまって大変申し訳ないです。具体的なサンプルまで書いて頂いていたのに・・・。沢山回答を頂こうと欲張ってしまいました。とても具体的なご回答で本当に助かりました。 IEで試してて、うまく座標を取ることができました。これで完成の光明が見えた気がします。有難うございました。

その他の回答 (1)

bot
ベストアンサー率0% (0/2)

2006/11/16 19:26 回答No.1

こんにちは。　下記リンクのソフト（IEの右クリック登録ツール）で利用されているソースが参考になるかもしれません。　例えば、「辞書 Yahoo!」を登録し、IEの右クリックから「辞書 Yahoo!」を実行するとダイアログが表示されます。その上では次のような操作が可能です。 - マウス左ボタンで範囲選択：チェックボックスのチェックを付ける - マウス右ボタンで範囲選択：チェックボックスのチェックを外す - マウスホイールボタン回転：チェックの移動「辞書 Yahoo!」のソース dicMULTI_Yahoo.html 　- getcoordinate ：エレメントの座標を取得する関数　- docmousedown, docmouseup, docmousemove ：四角を描写したりする関数