jquery - 跨度中选中的复选框值

Question

我正在为站点使用过滤器，并且需要将这些检查值显示在跨度的 div 中。我已经阅读了 Stack Overflow 的文章，它在 div 中显示，但我希望该值显示在 span 标签中。下面是我使用 Stack Overflow 作为值的代码。

jQuery：

$(document).ready(function()
{
    var el = $('.dropdown_box ');
    var text= el.text();
    $('.dropdown_container').on('click', 'li', function()
    {
        var filter = [];
        $.each($('.dropdown_container').find(':checked'), function(i, el)
        {
            filter.push(el.value);
        });
        el.text(text + ('') + filter.join (''));
    });
});

HTML：

<div class="dropdown_box">
    Filter Items :
</div>
<div class="dropdown_container">
    <ul>
        <li><input type="checkbox" name="filter[]" value="Black" class="cbx"/>Black</li>
        <li><input type="checkbox" name="filter[]" value="Red" class="cbx"/>Red</li>
        <li><input type="checkbox" name="filter[]" value="brown" class="cbx"/>brown</li>
        <li><input type="checkbox" name="filter[]" value="pink" class="cbx"/>pink</li>
        <li><input type="checkbox" name="filter[]" value="purple" class="cbx"/>purple</li>
        <li><input type="checkbox" name="filter[]" value="Orange" class="cbx"/>Orange</li>
    </ul>
</div>

Answer 1

在外面定义你的过滤器数组.on

例子

var filter = [];
$('.dropdown_container').on('click', 'li', function()
{

因为每次您click的filter数组变量都会重新初始化。

Answer 2

    $(document).ready(function()
    {
        var el = $('.dropdown_box ');
        var text= el.text();
        $('.dropdown_container').on('click', 'li', function()
        {
 var filter = [];

            $.each($('.dropdown_container').find(':checked'), function(i, el)
            {


filter.push("<span>"+el.value +"</span>");

            });

     $('.dropdown_box').html(filter);

        });
    });

没有检查结果试试这个