Флажок с выбранными ячейками

Question

Мне нужна ваша помощь, как показано ниже на изображении, которое я хотел бы знать коды JavaScript для флажка с выбранными элементами, которые должны отображаться под выбранным полем. Благодаря

Answer 1

Используйте этот HTML

<div class="taglist"> 
<label><input type="checkbox" value="2D Animation">2D Animation</label> 
<label><input type="checkbox" value="3D Animation">3D Animation</label> 
<label><input type="checkbox" value="Animatronics">Animatronics</label> 
<label><input type="checkbox" value="Architectural">Architectural</label> 
<label><input type="checkbox" value="Cartoon">Cartoon</label> 
<label><input type="checkbox" value="Cell Animation">Cell Animation</label> 
<label><input type="checkbox" value="Character Animation">Character Animation</label> 
<label><input type="checkbox" value="Cut & Paste">Cut & Paste</label> 
<label><input type="checkbox" value="Doodle">Doodle</label> 
<label><input type="checkbox" value="HDR">HDR</label> 
<label><input type="checkbox" value="High Speed">High Speed</label> 
<label><input type="checkbox" value="Illustration">Illustration</label> 
<label><input type="checkbox" value="Live Action">Live Action</label> 
<label><input type="checkbox" value="Macro">Macro</label> 
<label><input type="checkbox" value="Motion Design">Motion Design</label> 
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label> 
<label><input type="checkbox" value="Moving Installation">Moving Installation</label> 
</div> 

использовать этот HTML-код и этот скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
function updateTextArea() {  
var allVals = []; 
$('.taglist :checked').each(function(i) { 

    allVals.push((i!=0?"\r\n":"")+ $(this).val()); 
}); 
$('#video0_tags').val(allVals).attr('rows',allVals.length) ; 

} 
$(function() { 
    $('.taglist input').click(updateTextArea); 
    updateTextArea(); 
}); 
</script> 

Для справки это http://jsfiddle.net/7b5fk/1/