Question

此功能复制Select / MultiSelect下拉元素的用户体验 - 显示在容器中检查的复选框的值（在选中/取消选中时添加/删除它们），如果有更多如果已检查超过3项，则显示#selected而不是所选值。

这是两个功能的组合，当项目未经检查时，它们不能很好地协同工作（即它删除了值而不是逗号，当选择了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>

Answer 1

每次最简单地替换整个内容。同时使用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/

Answer 2

试试这个：

    $('.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);
   });

在此函数中使用数组显示已选中复选框的值

2 个答案: