Как сделать теги динамически отображаемыми на веб-странице?

Question

Как получить содержимое выбранного флажка и отобразить его как тег? (Как показано в электронной коммерции веб-сайтов при выборе фильтра)

Я хочу, чтобы отобразить флажком в качестве тега (Ex. Материализовать CSS Chips)

Answer 1

для отображения тегов, добавить Div элемент и дать идентификатор для элемента, чтобы передать его позже:

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

Теперь, когда che ckbox выбран, вызов функции для чтения выбранного значения.

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

дисплей() будет читать «идентификатор» выбранных значений и получить параметр «имя» и добавить, что к материализации 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>"; 
    } 
} 

Answer 2

материализовать Теги является современный JQuery плагин используется для создания симпатичный Материал Дизайн менеджер стиль тега с помощью материализации framework.You можно использовать it.check here