Question

如何获取所选复选框的内容并将其显示为标记？（当选择过滤器时显示在电子商务网站中）

我想将所选复选框显示为标签（例如，Materialise CSS Chips）

Answer 1

Materialise Tags是一个现代的jQuery插件，用于使用Materialize framework创建一个漂亮的Material Design样式标签管理器。你可以使用它。检查here

Answer 2

要显示标记，请添加div元素并为元素提供id以便稍后引用它：

<div id="chip_displayed"></div>

现在，当选中一个复选框时，调用该函数以读取所选值。

$(document.body).on('change', 'input[type="checkbox"]', function(){
    display();
});

display（）将读取所选值的“id”并获取“name”参数，并将其添加到Materialise CSS以显示为标记。

function display()
{
    document.getElementById("chip_displayed").innerHTML = "";

    var checked_ids = $('input:checkbox').filter(":checked").map(function () {
        return this.id;
    }).get();

    for(var i=0; checked_ids[i] ;i++)
    {
        var name = $('#'+checked_ids[i]).attr('name');
        document.getElementById("chip_displayed").innerHTML += "<div class='chip teal lighten-3' id='chip1'>"+name+"<i class='material-icons chip_close' id='close_chip1'>close</i></div>";
    }
}

如何在网页上动态显示标签？

2 个答案: