0

この関数は、Select / MultiSelectドロップダウン要素のユーザーエクスペリエンスを複製します-コンテナでチェックされたチェックボックスの値を表示し（チェックされている/チェックされていないときにそれらを追加/削除します）、3つ以上の項目がチェックされている場合は＃を表示します選択された値の代わりに選択されます。

これは2つの機能の組み合わせであり、項目がチェックされていない場合、それらは一緒にうまく機能しません（つまり、値は削除されますが、コンマは削除されません。3つ以上の項目が選択されている場合は正しく機能しません）。

配列を使用して値を格納し、項目がオン/オフのときに配列から値を追加/削除した方がはるかに良いと思います。PHPでの方法は知っていますが、Javascriptでは方法がわかりません。このコードは配列を作成するはずですが、それを自分のコードに統合する方法がわかりません。

$('input:checkbox[name="color[]"]:checked').each(function () {
     selectedColors.push($(this).val());
});

既存のコード：

JS

$(".dropdown_container ul li").click(function () {
    var text = $(this.children[0]).find("input").val();
    var text_edited = text.replace(/_/g, " ");
    var currentHtml = $(".dropdown_box span").html();
    var positionLocation = currentHtml.indexOf(text_edited);
    var numberChecked = $('input[name="color[]"]:checked').length;

    if (positionLocation < 1) {
        if (numberChecked <= 3) {
            $(".dropdown_box span").html(currentHtml.replace('Colors', ''));
            $(".dropdown_box span").append(', ' + text_edited);                                
            } else {
                $(".dropdown_box span").html(currentHtml.replace(currentHtml, numberChecked + " Selected"));
            }                                                            
    } else {
        (currentHtmlRevised = currentHtml.replace(text_edited, ""));
        $(".dropdown_box span").html(currentHtmlRevised.replace(currentHtml)); 
    }                
});

HTML

<div class="dropdown_box"><span>Colors</span></div>
<div class="dropdown_container">
    <ul id="select_colors">
        <li>
            <label><a href="#"><div style="background-color: #ff8c00" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>&#10003;</div>
            <input type="checkbox" name="color[]" value="Black" class="cbx"/>
            </div>Black</a></label>
        </li>
        <!-- More List Items --!>
    </ul>
</div>
4

2 に答える 2

0

これを試して：

    $('.cbx').change(function(){
      var cbx = $('.cbx:checked');
      var str = '';

      if (cbx.length<=3 && cbx.length!=0){
        for (var i=0;i<cbx.length;i++){
          if (i>0) str += ', ';
          str += cbx[i].value;
        }
     } else if (cbx.length==0){
       str = 'Colors';
     } else {
       str = cbx.length;
     }
     $('.dropdown_box span').html(str);
   });
于 2013-03-07T06:31:21.610 に答える
0

毎回コンテンツ全体を置き換えるのが最も簡単です。また、changeイベントの代わりにイベントを使用しclickます。

$(".dropdown_container input").change(function () {
    var checked = $(".dropdown_container input:checked");
    var span = $(".dropdown_box span");
    if (checked.length > 3) {
       span.html("" + checked.length + " selected");
    }
    else {
        span.html(checked.map(function () { return $(this).val().replace("_"," "); }).get().join(", "));
    }
});

例: http://jsfiddle.net/bman654/FCVjj/

于 2013-03-07T05:11:04.750 に答える