![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お世話になります。
マウスドラッグで範囲選択したブラウザ内のチェックボックスに、一括してチェックを入れるWEBアプリケーションを作成しております。
そこで、大きく2つ質問があります。
■質問 1
TABLEのTD内に存在する複数のチェックボックスのうち、特定のチェックボックスの位置情報をonMouseUpで取得したいと思っています。
styleシートで予め各チェックボックスに絶対位置を書いておけば可能かと存じますが、それ以外の方法で、可能なものがあればご教授頂きたいと思います。
■質問 2
質問 1が前提になるのですが、ブラウザの左上端(0,0)から、onMouseUpで取得したチェックボックスの(x,y)までに含まれる全てのチェックボックスのオブジェクトを取得したいと思っています。
これについてもヒント、もしくは参考になるソースなどがございましたら、是非にご紹介頂ければ幸いです。
以上になります。
よろしくお願い申し上げます。
No.2ベストアンサー
- 回答日時:
■質問 1に対する回答
onMouseUpイベントのイベントプロシジャ内で、「eventオブジェクト」を参照すると、そのイベントが
発生した座標をプロパティとして参照できます。
event.clientX/
event.clientY:イベント発生時のクライアント座標(タイトルバーを除くウィンドウ内の座標)
event.screenX/
event.screenY:イベント発生時の画面上での座標
event.offsetX/
event.offsetY:イベント発生時の要素上の座標
event.pageX/
event.pageY:イベント発生時のページ上の座標
(window.event.~~~で参照した方がいいかも知れません。)
■質問2に対する回答
多少工夫がいりますが、できることはできます。
1)チェックボックスの定義を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()>
2)1)のチェックボックス群は、以下の文でnameが同一の範囲のものは一括取得できます。
document.all("CB")
3)onMouseUpイベントのイベントプロシジャの中で、「eventオブジェクト」を参照すると、その
イベントが発生したオブジェクトがevent.srcElementプロパティで参照できます。
これで2)で一括取得したオブジェクトを、左記のevent.srcElementプロパティで得られる
オブジェクトまでで限定をかけます。
試みに書いたHTMLは、こんな感じです。
----------- event.html -------------------------
<html>
<head>
<title>イベントHTML</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>チェックボックス1</td><td><input NAME=CB ID=01 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス2</td><td><input NAME=CB ID=02 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス3</td><td><input NAME=CB ID=03 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス4</td><td><input NAME=CB ID=04 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス5</td><td><input NAME=CB ID=05 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス6</td><td><input NAME=CB ID=06 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス7</td><td><input NAME=CB ID=07 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス8</td><td><input NAME=CB ID=08 type=checkbox CHECKED onmouseup=getAll()></td></tr>
<tr><td>チェックボックス9</td><td><input NAME=CB ID=09 type=checkbox CHECKED onmouseup=getAll()></td></tr>
</table>
</body>
</html>
------------------------------------------
※ オブジェクトの取得の方は、厳密には原点座標からの矩形の範囲にあるオブジェクトを
取得している事にはなりません。
完全に矩形の範囲で採ろうとする--例えば、格子状にチェックボックスが並んでいる
等の場合は、IDの付与の仕方をxxyyの様な形にして、event.srcElementプロパティで
得られるオブジェクトのID XXYYからXX、YYよりも小さい値のIDを持つオブジェクト
に限定するという手法が考えられます。
≪受付中のままにしないで、ちゃんと質問は締め切りましょう≫
ご回答有難うございます。
お礼遅くなってしまって大変申し訳ないです。
具体的なサンプルまで書いて頂いていたのに・・・。
沢山回答を頂こうと欲張ってしまいました。
とても具体的なご回答で本当に助かりました。
IEで試してて、うまく座標を取ることができました。
これで完成の光明が見えた気がします。
有難うございました。
No.1
- 回答日時:
こんにちは。
下記リンクのソフト(IEの右クリック登録ツール)で利用されているソースが参考になるかもしれません。
例えば、「辞書 Yahoo!」 を登録し、IEの右クリックから 「辞書 Yahoo!」 を実行するとダイアログが表示されます。
その上では次のような操作が可能です。
- マウス左ボタンで範囲選択 :チェックボックスのチェックを付ける
- マウス右ボタンで範囲選択 :チェックボックスのチェックを外す
- マウスホイールボタン回転 :チェックの移動
「辞書 Yahoo!」のソース dicMULTI_Yahoo.html
- getcoordinate :エレメントの座標を取得する関数
- docmousedown, docmouseup, docmousemove :四角を描写したりする関数
参考URL:http://pls.xrea.jp/PasMenu/
お礼遅くなってしまって申し訳ありません。
参考のソース有難うございます。
まさに目指しているものの理想形です。
ソース開いてみたのですが、チンプンカンプンでした(笑
でも取っ掛かりさえ掴めていない段階でしたので、がんばってでも解読の対象が見つかってとても助かります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
ハイパーリンクを別ウインドウ...
-
TD内のチェックボックスの位置...
-
「オブジェクトは、このプロパ...
-
マウスをブラウザの外に出した...
-
特定<table>内の<td>の色を変える
-
チェックボックスにチェックが...
-
Jquery on click 発火しない
-
【JQuery】テーブルで行選択さ...
-
【UWSC】HTML内のある部分を抽...
-
JSで、テーブルのある行のみ、...
-
<JavaScript>tableタグを入力不...
-
<input>の選択肢をプルダウンメ...
-
return trueとreturn falseの用...
-
コピペを禁止するtextarea
-
javascriptでセレクトボックス...
-
未入力のラジオボタンに、alert...
-
value内に変数を入れたい
-
ASP エラーチェック VBScript
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
スクロールバーの表示位置を変...
-
【UWSC】HTML内のある部分を抽...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
HTML中のTABLEのデータを抽出す...
-
テーブルの項目の値取得
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
-
javascript クリックすると、あ...
-
JavaScriptでテーブルをクリッ...
-
jquery datatablesを使用 イン...
-
「オブジェクトは、このプロパ...
-
jqueryで表に連番No.を追加したい
おすすめ情報