在此函数中使用数组来显示已选中的复选框的值 [英] Use an array in this function to display values of chechboxes checked

问题描述

此功能复制了Select/MultiSelect下拉元素的用户体验-显示在容器中选中的复选框的值(选中/取消选中时将其添加/删除)，以及更多超过3个项目已被选中，它将显示所选的#而不是所选的值.

This function replicates the user experience of a Select/MultiSelect dropdown element - displaying the values of checkboxes checked in a container (adds/removes them when they're checked/unchecked), and if more than 3 items have been checked it displays the # selected instead of the values selected.

这2种功能的组合和他们打得不好在一起的时候项目选中的(即它取出值而不是逗号，当已选定超过3项工作不正常，等.)

It's a combination of 2 functions and they're not playing well together when items are unchecked (i.e. it's removing the values but not the commas, doesn't work correctly when more than 3 items have been selected, etc.)

我认为如果使用数组存储值，在选中/取消选中项时从数组中添加/删除值会更好得多，而且我知道如何在PHP中而不是在Javascript中做到这一点.这段代码应该创建数组，但是我不知道如何将其集成到我的代码中.

I think it would be much better if I used an array to store the values, adding/removing values from the array when items are checked/unchecked, and I know how do to in PHP but not in Javascript. This code should create the array, but I can't figure out how to integrate it into my code.

$('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>

推荐答案

最简单的方法是每次替换整个内容.另外，请使用change事件而不是click事件.

Easiest to just replace the entire content each time. Also use the change event instead of the click event.

$(".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/

这篇关于在此函数中使用数组来显示已选中的复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！