选中项目框的复选框

时间:2016-09-05 10:08:17

标签: javascript html5 css3 checkbox checkboxlist

我需要你的帮助,如下图所示,我想知道所选项目的JavaScript代码的复选框,这些项目应显示在所选项目框下方。感谢

Checkbox

1 个答案:

答案 0 :(得分:0)

使用此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/