質問: ポップアップで、選択肢を表示し、 選んだ結果が、ポップアップ元の画面に反映される仕組みですが、 チェックボックスだと複数選べてしまうことと、このサンプルだと 2度目に起動したときに、選択されていた部分がチェックされたまま、 になってしまいます そこで、このチェックボックスで選ぶところを SELECT に変えたいと思いましたが、 値を反映するところの記述で よくわからないので $("#selection").text($("#sample_pop select[type='selected']:checked").map(function () { 選択肢のほうは、 ``` 選択肢1 選択肢2 選択肢3 ``` にしてみましたが、実現できませんでした。 以下のチェックボックスを1択にする方法で inputのほうは、 input type="checkbox" class="checkGroup" name="chk" にして、クラス名をつけ ``` $(function(){ $('.checkGroup').on('click', function() { if ($(this).prop('checked')){ // 一旦全てをクリアして再チェックする $('.checkGroup').prop('checked', false); $(this).prop('checked', true); } }); }); ``` もやってみましたが、 機能的には、選択した1つが得られるカタチになりましたが、 その他のチェックマークが消えず、見かけ上何を選んでいるかが 結果を表示するまでわかりにくい、という形になってしまい 好ましくありませんでした。 出来ればSELECTに切り替えたいですが、 複数選択できないチェックボックスでもきれいに表示されれば要件クリアとしたいのです。 ご教授願います。 ``` header ポップアップ 選択肢 選択肢1 選択肢2 選択肢3 キャンセル 選択 footer ```
回答: チェックボックスを排他的に処理したほうがわかりやすいのでは? ``` 選択肢1 選択肢2 選択肢3 ``` ``` $(function () { $('[name=xxx]').click(function(){ var checked=$(this).prop('checked'); $('[name=xxx]').each(function(){ $(this).prop('checked',false); }); $(this).prop('checked',checked); }); }); ```