
お世話になります。
マウスドラッグで範囲選択したブラウザ内のチェックボックスに、一括してチェックを入れる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で質問しましょう!
似たような質問が見つかりました
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- Excel(エクセル) エクセルVBAでチェックボックスにチェックを入れる 1 2022/09/14 00:52
- Visual Basic(VBA) EXCEL VBAにて動的にCheckBOXを複数作成し、同BOXにイベントを追加したい 1 2023/03/16 07:05
- Excel(エクセル) たくさんあるフォームコントロールを効率よく確認するには 1 2022/12/24 12:27
- JavaScript jquery 診断コンテンツにチェックボックスを付けたいです 3 2023/01/19 18:31
- Access(アクセス) チェックボックスにチェックが入った後の挙動 1 2022/08/21 12:39
- Excel(エクセル) Libreoffice calcで人名を取り消し線を入れたい。 2 2022/09/10 15:27
- Excel(エクセル) 画像のようなチェックボックスとハイパーリンクがありますが、 ハイパーリンクを押すと、チェックボックス 1 2023/04/07 12:56
- Excel(エクセル) スプレッドシートのGASでチェックボックスのチェック全てを外したい 1 2022/09/13 17:09
- JavaScript GASでチェックボックスを一括offしたい 1 2022/09/13 19:54
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
javascript クリックすると、あ...
-
プルダウンで選択すると、DBの...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
tableの任意行にfocusをあてる
-
テーブルの項目の値取得
-
jqueryで表に連番No.を追加したい
-
一覧から選択した行の行番号を...
-
至急!GetElementById でtdの...
-
jsで質問です。 displayプロパ...
-
特定の文字列を挿入
-
jqueryでどうやってエスケープ?
-
jspでのArrayListの値の表示
-
javascriptで質問です。 displa...
-
EasyUIのSubGrid(jquery)にお...
-
Selenium.ChromeDriverの使い方...
-
マウスオーバー時テーブルの背...
-
JavaScriptでテーブルをクリッ...
-
jQueryでテーブル行の表示・非表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
クリックされた罫表セルの行番...
-
tableの任意行にfocusをあてる
-
javascript クリックすると、あ...
-
チェックボックスにチェックが...
-
マウスをブラウザの外に出した...
-
ブルダウン選択でページの表示...
-
Excelで作ったhtmlファイルのサ...
-
スクロールバーの表示位置を変...
-
動的なtableの値を取得したい
-
ツールチップにテーブル左端列...
-
【UWSC】HTML内のある部分を抽...
-
別ページからOnclickでテーブル...
-
【JQuery】テーブルで行選択さ...
-
JSで、テーブルのある行のみ、...
おすすめ情報