1

選択/複数選択要素の機能を複製しています。この関数を使用して、関連するコンテナーで選択された項目を表示しようとしています。カンマ区切りのリストで選択されたすべての値を表示する必要がありますが、現在は 1 つの選択 (最後に行われたもの) しか表示されていません。また、チェックボックスの値 (つまり ) の代わりに、選択されたリスト項目のチェックボックス、背景色なども表示されますvalue="Black"。

非常に特定の方法でスタイルを設定する必要があるため、jQuery UI MultiSelect ウィジェットを使用できなかったいくつかの複数選択フォーム要素にこれを使用しています (背景色または画像で表示され、複数の列に広がるオプションなど)。 ）。

以下に関連するコードを含め、スタイル設定された'faux' -multiselect 要素の実際の例をここに投稿しました: http://jsfiddle.net/chayacooper/GS8dM/2/

JS スニペット

$(document).ready(function () {
    $(".dropdown_container ul li a").click(function () {
        var text = $(this).html();
        $(".dropdown_box span").html(text);
    });
    function getSelectedValue(id) {
        return $("#" + id).find("dropdown_box span.value").html();
    }
});

HTML スニペット

<div class="dropdown_box"><span>Colors</span></div>

<div class="dropdown_container">
<ul>
<li><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);" title="Black"><div class=CheckMark>&#10003;</div>
<input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a>
</li>
<!-- More list items with checkboxes -->
</ul>
</div>

他にもいくつかの方法を試しました (ここにリストされている方法の多くを含む: jQuery でチェックボックスの値を取得する方法) が、これらの特定のフォーム要素に組み込む必要がある非表示のチェックボックスやその他の機能で機能するものはありませんでした。

4

2 に答える 2

1

まず、document.ready の click(..){..} を変更します。

$(".dropdown_container ul li a").click(function () {
    var text = $(this).html();
    var currentHtml = $(".dropdown_box span").html(); 
    var numberChecked = $('input[name="color[]"]:checked').length;
    $(".dropdown_box span").html(currentHtml.replace('Colors','')); 
    if (numberChecked > 1) { 
        $(".dropdown_box span").append(', ' + text); 
        } else { 
        $(".dropdown_box span").append(text); 
    }
});

これにより、テキストの追加が正しく行われます。しかし、コード内の画像の扱いが理解できませんでした。

値のみを処理するように更新しますvar text = $(this).html();。

var text = $(this).find("input").val();
于 2013-02-26T07:52:42.050 に答える
0

クリック イベントがトリガーされるたびにチェック ボックスのすべての値を取得し、その値をスパンに追加する方が簡単な場合があります。http://jsfiddle.net/9w95b/のように

<input>また、タグ内にタグを入れないことをお勧めし<a>ます。

于 2013-02-26T08:53:52.387 に答える