HTML+JS怎样试下获取选择框信息,代码是什么
Admin 2022-08-24 群英技术资讯 1310 次浏览
这篇文章主要讲解了“HTML+JS怎样试下获取选择框信息,代码是什么”,文中的讲解内容简单、清晰、详细,对大家学习或是工作可能会有一定的帮助,希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章我们来了解CSS如何设置文字间距。CSS中,letter-spacing属性的作用是增加或减少字符间的空白,因此我们可以使用这个属性来调整文字间距,具体的实现及代码如下,有需要的朋友可以参考,感兴趣的朋友接下来就跟随小编来了解看看吧!
在CSS中我们常常会使用到li标签,因为li标签用途很广泛,它可以用来制作列表,选项卡,导航等等。但是li是块级元素,我们想要实现横向排列,究竟该怎样做呢?下文给大家分享了两种方法,有需要的朋友可以参考,那么接下就跟小编来学习一下吧。
今天给大家分享的是关于CSS中flex布局自动换行的内容,flex 是常用的 css3 布局方式,可以用少量的代码高效的实现各种页面布局,但是如果flex布局太长,那么自动换行还是很有必要的,那么具体怎样实现呢?接下来跟随小编一起看看吧。
这篇文章主要介绍了用CSS3和table标签实现一个圆形轨迹的动画的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章给大家分享一个CSS3实现钮动画的效果的示例,实现效果是鼠标经过有按钮动画的效果。小编觉得挺实用的,因此分享给大家做个参考,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008