一个表单中有多个复选框,当点击提交按钮时,需要获取到已经勾选的复选框的值
工具/原料
记事本
方法/步骤
1、新建一个记事本,然后将下述代码复制咦筋庑檗到里面:<!doctypehtml><html><head>稆糨孝汶;<metacharset="gb2312"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>复选框多选</title></head><body><div><inputtype="checkbox"value="1"/><span>红色</span><inputtype="checkbox"value="2"/><span>绿色</span><inputtype="checkbox"value="3"/><span>黄色</span><inputtype="checkbox"value="4"/><span>蓝色</span><inputtype="checkbox"value="5"/><span>紫色</span></div><div><buttontype="button"onclick="getValue()">获取选中的复选框的值</button></div><div><pid="show"></p></div><script>functiongetValue(){//获取所有的input标签varinput=document.getElementsByTagName("input");varstr="选中的值为:";for(vari=0;i<input.length;i++){varobj=input[i];//判断是否是checkbox并且已经选中if(obj.type=="checkbox"&&obj.checked){varcode=obj.value;//获取checkbox的值str=str+code+",";}}document.getElementById("show").innerText=str;}</script></body></html>
2、然后保存,将记事本文件的后缀txt,修改为html。如图:
3、双击运行这个文件,看到如下界面:
4、然后勾选上面的任意一个复选框,再点击按钮,将会获取到已经勾选的复选框的值,如下图所示: