1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="gb2312"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <title>复选框多选</title> 8 </head> 9 10 <body> 11 <div> 12 <input type="checkbox" value="1"/><span>红色</span> 13 <input type="checkbox" value="2"/><span>绿色</span> 14 <input type="checkbox" value="3"/><span>黄色</span> 15 <input type="checkbox" value="4"/><span>蓝色</span> 16 <input type="checkbox" value="5"/><span>紫色</span> 17 </div> 18 19 <div> 20 <button type="button" onclick="getValue()">获取选中的复选框的值</button> 21 </div> 22 23 <div> 24 <p id="show"></p> 25 </div> 26 27 <script> 28 29 function getValue() 30 { 31 //获取所有的input标签 32 var input = document.getElementsByTagName("input"); 33 var str="选中的值为:"; 34 for (var i = 0; i < input.length; i++) 35 { 36 var obj = input[i]; 37 //判断是否是checkbox并且已经选中 38 if (obj.type == "checkbox" && obj.checked) 39 { 40 var code = obj.value;//获取checkbox的值 41 str=str+code+","; 42 } 43 } 44 document.getElementById("show").innerText=str; 45 } 46 </script> 47 48 </body> 49 </html>
原文：https://www.cnblogs.com/wn798/p/11988043.html