javascript - 修改此函数以显示所有选中的复选框的值(而不是最后选择的)

Question

我正在复制选择/多选元素的功能，并尝试使用此功能来显示已在相关容器中选择的项目。我需要显示在逗号分隔列表中选择的所有值，但它当前仅显示一个选择(最后一个选择)。它还显示所选列表项的复选框、背景颜色等，而不是复选框值(即 value="Black")。

我将其用于一些多选表单元素，在这些元素中我无法使用 jQuery UI MultiSelect Widget，因为它们需要以非常特定的方式进行样式设置(使用背景颜色或图像显示的选项并分布在几列中)等)。

我已在下面添加了相关代码，并在此处发布了样式化'faux'-多选元素的工作示例: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>

我尝试了几种其他方法(包括此处列出的许多方法: How to retrieve checkboxes values in jQuery )，但这些方法都不适用于隐藏复选框和/或我需要合并到这些特定表单元素中的其他功能。

Answer 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();