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

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

ただいまの
回答率

90.51%

  • JavaScript

    20417questions

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

  • jQuery

    8157questions

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

チェックボックスで選択する部分をSELECTに変えたい

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,666

ポップアップで、選択肢を表示し、
選んだ結果が、ポップアップ元の画面に反映される仕組みですが、
チェックボックスだと複数選べてしまうことと、このサンプルだと
2度目に起動したときに、選択されていた部分がチェックされたまま、
になってしまいます

そこで、このチェックボックスで選ぶところを
SELECT に変えたいと思いましたが、
値を反映するところの記述で

よくわからないので
$("#selection").text($("#sample_pop select[type='selected']:checked").map(function () {

選択肢のほうは、

<select name="xxx">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>


にしてみましたが、実現できませんでした。

以下のチェックボックスを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に切り替えたいですが、
複数選択できないチェックボックスでもきれいに表示されれば要件クリアとしたいのです。

ご教授願います。

<head>
<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js">
</script>

<script>
$(document).ready(function () {
    $("#submit").on("click", function () {
        // 子画面選択結果反映用のdivを作る
        if (!$("#selection").get(0)) {
            $("#parent").append('<div id="selection"></div>');
        }

        // チェックしたチェックボックスのラベルを親画面に反映
        $("#selection").text($("#sample_pop input[type='checkbox']:checked").map(function () {
            return $("label[for='" + $(this).attr("id") + "']").text();
        }).get().join(","));
    });
});
</script>
</head>

<body>
<div data-role="page">
    <div data-role="header">header</div>
    <!-- 親画面 -->
    <div data-role="content" id="parent">
        <a href="#sample_pop" data-role="button" data-rel="popup" data-position-to="window">ポップアップ</a>
    </div>
    <!-- ポップアップ -->
    <div data-role="popup" id="sample_pop">
        <fieldset data-role="controlgroup">
            <legend>選択肢</legend>
            <input type="checkbox" name="item1" id="item1" value="1" />
            <label for="item1">選択肢1</label>
            <input type="checkbox" name="item2" id="item2" value="2" />
            <label for="item2">選択肢2</label>
            <input type="checkbox" name="item3" id="item3" value="3" />
            <label for="item3">選択肢3</label>
        </fieldset>

        <a href="#" data-role="button" data-rel="back" data-inline="true">キャンセル</a>
        <a href="#" data-role="button" data-rel="back" data-inline="true" id="submit">選択</a>

    </div>
    <div data-role="footer">footer</div>
</div>

</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

チェックボックスを排他的に処理したほうがわかりやすいのでは?

<input type="checkbox" name="xxx" value="1">選択肢1<br>
<input type="checkbox" name="xxx" value="2">選択肢2<br>
<input type="checkbox" name="xxx" value="3">選択肢3<br>
$(function () {
  $('[name=xxx]').click(function(){
    var checked=$(this).prop('checked');
    $('[name=xxx]').each(function(){
      $(this).prop('checked',false);
    });
    $(this).prop('checked',checked);
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

type="radio" にすればいいのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/11 14:50

    radioだと選択したものが外せないので、と思っているのですが
    見た目的には、選択肢の行数が不定になるので、件数が多い場合に
    困るので checkbox は次善の策になります。

    キャンセル

  • 2016/09/11 15:10

    > 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

    キャンセル

  • 2016/09/13 02:29

    見た目的に好ましくない、というのは、
    選択肢が増えていくと、画面に表示する領域が広がってしまうということです。
    selectであれば、1行で100件でも選択できますが、
    radio や checkbox では 100レコード表示する必要がでてきてしまうので、
    ポップアップで画面に表示するには、無理があります。

    キャンセル

  • 2016/09/13 04:16

    100件のセレクト要素はユーザーとしてはあれですが、件数の増減を気にしないのが優先であれば select を使えば良いと思います。

    一つ前のコメントにセレクトでの値の採り方も書いておきましたので、一度試してみてください。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20417questions

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

  • jQuery

    8157questions

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