ポップアップで、選択肢を表示し、
選んだ結果が、ポップアップ元の画面に反映される仕組みですが、
チェックボックスだと複数選べてしまうことと、このサンプルだと
2度目に起動したときに、選択されていた部分がチェックされたまま、
になってしまいます
そこで、このチェックボックスで選ぶところを
SELECT に変えたいと思いましたが、
値を反映するところの記述で
よくわからないので
$("#selection").text($("#sample_pop select[type='selected']:checked").map(function () {
選択肢のほうは、
HTML
1<select name="xxx"> 2<option value="1">選択肢1</option> 3<option value="2">選択肢2</option> 4<option value="3">選択肢3</option> 5</select>
にしてみましたが、実現できませんでした。
以下のチェックボックスを1択にする方法で
inputのほうは、
input type="checkbox" class="checkGroup" name="chk"
にして、クラス名をつけ
JQuery
1$(function(){ 2 $('.checkGroup').on('click', function() { 3 if ($(this).prop('checked')){ 4 // 一旦全てをクリアして再チェックする 5 $('.checkGroup').prop('checked', false); 6 $(this).prop('checked', true); 7 } 8 }); 9});
もやってみましたが、
機能的には、選択した1つが得られるカタチになりましたが、
その他のチェックマークが消えず、見かけ上何を選んでいるかが
結果を表示するまでわかりにくい、という形になってしまい
好ましくありませんでした。
出来ればSELECTに切り替えたいですが、
複数選択できないチェックボックスでもきれいに表示されれば要件クリアとしたいのです。
ご教授願います。
JQuery,HTML
1<head> 2<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" /> 3<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 4<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"> 5</script> 6 7<script> 8$(document).ready(function () { 9 $("#submit").on("click", function () { 10 // 子画面選択結果反映用のdivを作る 11 if (!$("#selection").get(0)) { 12 $("#parent").append('<div id="selection"></div>'); 13 } 14 15 // チェックしたチェックボックスのラベルを親画面に反映 16 $("#selection").text($("#sample_pop input[type='checkbox']:checked").map(function () { 17 return $("label[for='" + $(this).attr("id") + "']").text(); 18 }).get().join(",")); 19 }); 20}); 21</script> 22</head> 23 24<body> 25<div data-role="page"> 26 <div data-role="header">header</div> 27 <!-- 親画面 --> 28 <div data-role="content" id="parent"> 29 <a href="#sample_pop" data-role="button" data-rel="popup" data-position-to="window">ポップアップ</a> 30 </div> 31 <!-- ポップアップ --> 32 <div data-role="popup" id="sample_pop"> 33 <fieldset data-role="controlgroup"> 34 <legend>選択肢</legend> 35 <input type="checkbox" name="item1" id="item1" value="1" /> 36 <label for="item1">選択肢1</label> 37 <input type="checkbox" name="item2" id="item2" value="2" /> 38 <label for="item2">選択肢2</label> 39 <input type="checkbox" name="item3" id="item3" value="3" /> 40 <label for="item3">選択肢3</label> 41 </fieldset> 42 43 <a href="#" data-role="button" data-rel="back" data-inline="true">キャンセル</a> 44 <a href="#" data-role="button" data-rel="back" data-inline="true" id="submit">選択</a> 45 46 </div> 47 <div data-role="footer">footer</div> 48</div> 49 50</body> 51
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。