質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

5367閲覧

チェックボックスどれが選ばれているかを調べたいが、innerText以外に違い無い場合の調べ方(class名が同じ)

oyatsu8

総合スコア97

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/15 14:26

編集2016/12/15 16:36

Leaflet.jsのチェックボックスでどれが選ばれているか?を調べたく、
このleafletのサンプルを元に
http://leafletjs.com/examples/layers-control/example.html

チェックボックスの(動的な)ソースを見た所、inputには下記のような
ネーム属性がないものでした。

html

1<form class="leaflet-control-layers-list"> 2 <div class="leaflet-control-layers-base"> 3 <label><div> 4 <input type="radio" class="leaflet-control-layers-selector" name="leaflet-base-layers"> 5 <span> osm</span> 6 </div></label> 7 </div> 8 9 <div class="leaflet-control-layers-separator"></div> 10 11 <div class="leaflet-control-layers-overlays"> 12 13 <label><div> 14 <input type="checkbox" class="leaflet-control-layers-selector" checked=""> 15 <span>オーバーレイ01</span> 16 </div></label> 17 <label><div> 18 <input type="checkbox" class="leaflet-control-layers-selector"> 19 <span>オーバーレイ02</span> 20 </div></label> 21 <label><div> 22 <input type="checkbox" class="leaflet-control-layers-selector"> 23 <span>オーバーレイ03</span> 24 </div></label> 25 26 </div> 27</form>

htmlに下記のようなコードを付け加えてみたのですが、
(////ここでどのチェックボックスがチェックされているか確認 の部分)
チェックボックス自体が無くなってしまいました、、
アドバイス頂けたら助かります。

追記:jQueryを入れていないのにjQuery記述で動くはずがありませんでした。しかしやはり動きません

html

1 2<!DOCTYPE html> 3<html> 4<head> 5 6 <title>Layers Control Tutorial - Leaflet</title> 7 8 <meta charset="utf-8" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 11 <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 12 13 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /> 14 <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script> 15 16 17 <style> 18 #map { 19 width: 600px; 20 height: 400px; 21 } 22 </style> 23 24 25</head> 26<body> 27 28<div id='map'></div> 29 30<script> 31 var cities = new L.LayerGroup(); 32 33 L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), 34 L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), 35 L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), 36 L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); 37 38 39 var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 40 '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 41 'Imagery © <a href="http://mapbox.com">Mapbox</a>', 42 mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'; 43 44 var grayscale = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}), 45 streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); 46 47 var map = L.map('map', { 48 center: [39.73, -104.99], 49 zoom: 10, 50 layers: [grayscale, cities] 51 }); 52 53 var baseLayers = { 54 "Grayscale": grayscale, 55 "Streets": streets 56 }; 57 58 var overlays = { 59 "Cities": cities 60 }; 61 62////ここでどのチェックボックスがチェックされているか確認 start 63 var check_val = $('.leaflet-control-layers-selector:checked').val(); 64 console.log(check_val); 65////ここでどのチェックボックスがチェックされているか確認 end 66 67 L.control.layers(baseLayers, overlays).addTo(map); 68</script> 69</body> 70</html> 71

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

とりあえず追加してからでないと要素が取得できないのでは?

JavaScript

1// 追加してから 2 L.control.layers(baseLayers, overlays).addTo(map); 3 4////ここでどのチェックボックスがチェックされているか確認 start 5 var check_val = $('.leaflet-control-layers-selector:checked').val(); 6 console.log(check_val); 7////ここでどのチェックボックスがチェックされているか確認 end

追記:

jQueryで取得せずとも overlayadd / overlayremove イベントを採れば名前を取得することが出来ます。

【Documentation - Leaflet - a JavaScript library for interactive maps】
http://leafletjs.com/reference-1.0.2.html#map-event

overlayadd LayersControlEvent Fired when an overlay is selected through the layer control.
overlayremove LayersControlEvent Fired when an overlay is deselected through the layer control.

どなたかの作ったサンプル( http://jsfiddle.net/Xelio/FBSC8/ )が動かなかったので一部修正しました。とりあえず名前が取得できるところまではわかると思います。
http://jsfiddle.net/txjm0soe/2/


JavaScript

1var html = $( '.leaflet-control-layers-selector:checked' ).parent().find( 'span' ).html()

投稿2016/12/15 15:25

編集2016/12/15 16:48
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

oyatsu8

2016/12/15 15:43

ありがとうございます!Chrome開発ツールで見た所、onになりました! 3つのチェックボックスのうち、どのチェックボックスがonなのかを知りたいのですが、nameやidなど区別出来るものが無く、上のhtmlだと、「オーバーレイ01」にチェックが入っているということを知ることは出来ないのでしょうか
oyatsu8

2016/12/16 01:54

ありがとうございます!!!!こんな機能があるとは知りませんでした。いまから実装してみます
oyatsu8

2016/12/16 12:40

map.on('overlayadd overlayremove baseLayerchange', function(a) {} を使い、どのオーバレイのチェックボックスがオンになっているか分かり、jsでDOMを辿らなくても、やりたいことが実現出来ました。大変助かりました!ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問