HTML+JS怎样试下获取选择框信息,代码是什么
Admin 2022-08-24 群英技术资讯 472 次浏览
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获取选择框信息</title> 6 <script language="javascript"> 7 function show(){ 8 var name=document.myform.name.value; 9 alert(name); 10 11 var sex 12 if(document.myform.sex[0].checked){ 13 sex=document.myform.sex[0].value; 14 }else{ 15 sex=document.myform.sex[1].value; 16 } 17 alert(sex); 18 19 var hobby=""; 20 for(i=0;i<document.myform.interesting.length;i++){ //循环遍历 21 if(document.myform.interesting[i].checked){ //判断是否被选中 22 hobby+=document.myform.interesting[i].value+"、" //选中加入hobby中 23 } 24 } 25 alert(hobby); 26 27 var area=document.myform.result.value; 28 alert(area); 29 } 30 31 function local(val){ 32 document.myform.result.value=val; 33 } 34 35 </script> 36 37 </head> 38 <body> 39 <form action="#" method="post" name="myform"> 40 姓名: 41 <input type="text" name="name"> <br/> 42 性别: 43 <input type="radio" name="sex" value="男" checked>男 44 <input type="radio" name="sex" value="女">女 <br/> 45 爱好: 46 <input type="checkbox" name="interesting" value="听音乐">听音乐 47 <input type="checkbox" name="interesting" value="看电影">看电影 48 <input type="checkbox" name="interesting" value="玩游戏">玩游戏 49 <input type="checkbox" name="interesting" value="看书">看书<br/> 50 地区: 51 <select name="area" onchange="local(this.value)"> <br/> 52 <option>=请选择=</option> 53 <option value="济南">济南</option> 54 <option value="青岛">青岛</option> 55 <option value="威海">威海</option> 56 </select> 57 <input type="text" name="result" readonly><br/> 58 59 <input type="button" value="显示内容" onclick="show()"> 60 61 </form> 62 </body> 63 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>获取选择框信息</title> 6 <script language="javascript"> 7 function show(){ 8 var name=document.myform.name.value; 9 alert(name); 10 11 var sex 12 if(document.myform.sex[0].checked){ 13 sex=document.myform.sex[0].value; 14 }else{ 15 sex=document.myform.sex[1].value; 16 } 17 alert(sex); 18 19 var hobby=""; 20 for(i=0;i<document.myform.interesting.length;i++){ 21 if(document.myform.interesting[i].checked){ 22 hobby+=document.myform.interesting[i].value+"、" 23 } 24 } 25 alert(hobby); 26 27 var area=document.myform.result.value; 28 alert(area); 29 } 30 31 function local(val){ 32 document.myform.result.value=val; 33 } 34 35 </script> 36 37 </head> 38 <body> 39 <form action="#" method="post" name="myform"> 40 姓名: 41 <input type="text" name="name"> <br/> 42 性别: 43 <input type="radio" name="sex" value="男" checked>男 44 <input type="radio" name="sex" value="女">女 <br/> 45 爱好: 46 <input type="checkbox" name="interesting" value="听音乐">听音乐 47 <input type="checkbox" name="interesting" value="看电影">看电影 48 <input type="checkbox" name="interesting" value="玩游戏">玩游戏 49 <input type="checkbox" name="interesting" value="看书">看书<br/> 50 地区: 51 <select name="area" onchange="local(this.value)"> <br/> 52 <option>=请选择=</option> 53 <option value="济南">济南</option> 54 <option value="青岛">青岛</option> 55 <option value="威海">威海</option> 56 </select> 57 <input type="text" name="result" readonly><br/> 58 59 <input type="button" value="显示内容" onclick="show()"> 60 61 </form> 62 </body> 63 </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
我们接触HTML的时候,很容易使用表格进行页面布局,其实在实际的项目开发过程中,我们不建议使用表进行布局,但这篇还是简单的解释一下HTML表格布局的使用
这篇文章主要介绍了CSS 实现多彩、智能的阴影效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
这篇文章主要给大家介绍用@media怎样实现响应式适配屏幕的内容,一些朋友可能对@media不是很了解。对此下面我们先简单的了解@media的定义和使用,再看@media怎样实现响应式适配屏幕。
浏览器支持所有主流浏览器都支持visibility属性。注释:任何的版本的internetexplorer(包括ie8)都不支持"inherit"和"collaps教程e"属性值。所有主流浏览器都支持display属性。注释:任何版本的internetexplorer(包括ie8)都不支持"inherit"、"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table- ...
这篇文章主要介绍了详解CSS 去掉inline-block元素间隙的几种方法,这些间隙会导致一些布局上的问题,需要把间隙去掉。非常具有实用价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008