ウェブページにタグを動的に表示するにはどうすればよいですか？

Question

選択したチェックボックスの内容を取得してタグとして表示するにはどうすればよいですか？

Answer 1

をit.check使用することができます。

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

今、 ckboxが選択されている場合は、関数を呼び出して選択した値を読み取ります。

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

display（）は、選択された値の 'id'を読み込み、 'name'パラメータを取得し、マテリアライズ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プラグインである私は、タグ（例。マテリアライズCSSチップ）として選択し、チェックボックスを表示したい

（フィルタを選択したときにEコマースのウェブサイトに表示されているように）マテリアライズframework.Youを使用して見栄えの良い材料設計スタイルタグマネージャは、タグを表示のdiv要素を追加し、後でそれを参照する要素にIDを付与するにはhere