1

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

我将它用于一些无法使用 jQuery UI MultiSelect 小部件的多选表单元素，因为它们需要以非常特定的方式设置样式（使用背景颜色或图像显示的选项并分布在多个列中，等等。 ）。

我在下面包含了相关代码，并在此处发布了样式为“faux” -multiselect 元素的工作示例：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>

我尝试了其他几种方法（包括此处列出的许多方法： 如何在 jQuery 中检索复选框值），但没有一种方法适用于隐藏复选框和/或我需要合并到这些特定表单元素中的其他功能。

4

2 回答 2

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();
于 2013-02-26T07:52:42.050 回答
0

每当触发单击事件时，仅获取复选框的所有值然后将这些值附加到您的跨度可能会更容易。喜欢http://jsfiddle.net/9w95b/

我还建议不要将<input>标签放在标签内<a>。

于 2013-02-26T08:53:52.387 回答