Q&A
radioだと選択したものが外せないので、と思っているのですが
見た目的には、選択肢の行数が不定になるので、件数が多い場合に
困るので checkbox は次善の策になります。
ポップアップで、選択肢を表示し、
選んだ結果が、ポップアップ元の画面に反映される仕組みですが、
チェックボックスだと複数選べてしまうことと、このサンプルだと
２度目に起動したときに、選択されていた部分がチェックされたまま、
になってしまいます
そこで、このチェックボックスで選ぶところを
SELECT に変えたいと思いましたが、
値を反映するところの記述で
よくわからないので
$("#selection").text($("#sample_pop select[type='selected']:checked").map(function () {
選択肢のほうは、
HTML
1<select name="xxx"> 2<option value="1">選択肢１</option> 3<option value="2">選択肢２</option> 4<option value="3">選択肢３</option> 5</select>
にしてみましたが、実現できませんでした。
以下のチェックボックスを１択にする方法で
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});
もやってみましたが、
機能的には、選択した１つが得られるカタチになりましたが、
その他のチェックマークが消えず、見かけ上何を選んでいるかが
結果を表示するまでわかりにくい、という形になってしまい
好ましくありませんでした。
出来れば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">選択肢１</label> 37 <input type="checkbox" name="item2" id="item2" value="2" /> 38 <label for="item2">選択肢２</label> 39 <input type="checkbox" name="item3" id="item3" value="3" /> 40 <label for="item3">選択肢３</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
回答2件
0
チェックボックスを排他的に処理したほうがわかりやすいのでは？
HTML
1<input type="checkbox" name="xxx" value="1">選択肢１<br> 2<input type="checkbox" name="xxx" value="2">選択肢２<br> 3<input type="checkbox" name="xxx" value="3">選択肢３<br> 4
javascript
1$(function () { 2 $('[name=xxx]').click(function(){ 3 var checked=$(this).prop('checked'); 4 $('[name=xxx]').each(function(){ 5 $(this).prop('checked',false); 6 }); 7 $(this).prop('checked',checked); 8 }); 9}); 10
投稿2016/09/12 00:32
総合スコア114833
0
type="radio" にすればいいのでは？
投稿2016/09/11 05:00
総合スコア69407
> radioだと選択したものが外せない
出来ます。https://jsfiddle.net/wbq3d0w4/1/
> 見た目的には、
どういう見た目が好ましいかなどを図示するなどしてください。
> 件数が多い場合に困るので
なにがどう困るのかを詳しく書いてもらえますか？
質問文の select 要素を取得したいのであろう下記部分は、
$("#sample_pop select[type='selected']:checked").map()
こう書きます。
$("#sample_pop select").val()
【【jQuery】フォーム部品の取得・設定まとめ - Qiita】
http://qiita.com/kazu56/items/36b025dac5802b76715c
見た目的に好ましくない、というのは、
選択肢が増えていくと、画面に表示する領域が広がってしまうということです。
selectであれば、１行で１００件でも選択できますが、
radio や checkbox では １００レコード表示する必要がでてきてしまうので、
ポップアップで画面に表示するには、無理があります。
１００件のセレクト要素はユーザーとしてはあれですが、件数の増減を気にしないのが優先であれば select を使えば良いと思います。
一つ前のコメントにセレクトでの値の採り方も書いておきましたので、一度試してみてください。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。