<html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>HTML标签</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <!-- 一组单选框 --> <label for="A">A</label><input id="A" name="letter1" value="1" type="radio" /> <label for="B">B</label><input id="B" name="letter1" value="2" type="radio" /> <label for="C">C</label><input id="C" name="letter1" value="3" type="radio" /> <br /> <input id="mybtn" type="button" value="click" /><br /> <!-- 一组复选框 --> <label for="CA">A</label><input id="CA" name="letter2" value="1" type="checkbox" /> <label for="CB">B</label><input id="CB" name="letter2" value="2" type="checkbox" /> <label for="CC">C</label><input id="CC" name="letter2" value="3" type="checkbox" /> <br /> <input id="mybtn2" type="button" value="click" /><br /> </body> </html> <script type="text/javascript"> //兼容ie浏览器测试 var console = console || {}; console.log = console.log || function(a){ alert(a); } /* 单选框/复选框也是比较常用的控件,主要用来让用户N选1或者N选N. */ var btn = document.getElementById("mybtn"); btn.onclick = function(){ //通过name获取单选框dom var radio = document.getElementsByName("letter1"); for(var i = 0,len = radio.length; i < len; i++){ var ele = radio[i]; //判断是否选中,返回true/false var b = ele.checked; if(b){ //选中了... console.log("选中了:" + ele.id + ",value:" + ele.value); } } } //复选框选择 var btn2 = document.getElementById("mybtn2"); btn2.onclick = function(){ //通过name获取复选框dom var radio = document.getElementsByName("letter2"); for(var i = 0,len = radio.length; i < len; i++){ var ele = radio[i]; //判断是否选中,返回true/false var b = ele.checked; if(b){ //选中了... console.log("选中了:" + ele.id + ",value:" + ele.value); } } } /* 使用jquery获取单选框选中的值 */ $("#mybtn").click(function(){ //获取单选框选中的dom //分析一下就是,input标签里面name=letter1,并且选中的对象 var radio = $("input[name='letter1']:checked"); var id = radio.attr("id"); var val = radio.val(); console.log("选中了:" + id +",value:" + val); }); /* 使用jquery获取复选框选中的值 */ $("#mybtn2").click(function(){ //获取复选框选中的dom //分析一下就是,input标签里面name=letter2,并且选中的对象 var radio = $("input[name='letter2']:checked"); radio.each(function(i,ele){ //注意这个ele是dom对象,并不是jquery对象.如果要转成jquery对象$(ele)就好. var id = ele.id; var val = ele.value; console.log("选中了:" + id +",value:" + val); }); }); /* 知识点: 1.要把多个单选框/复选框组成一组,只需要指定相同的name就好. 2.判断单选框/复选框是否选中,直接判断dom的checked属性就好. 3.介绍了使用jquery选择器直接获取到单选框/复选框选中的dom. */ </script>
相关推荐
团队介绍模板,CSS,适合多人团队项目个人介绍及项目介绍
ppt格式的html5 介绍,非常形象、生动的资料
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
程序猿炫酷个人介绍HTML源码
html-css-网页模板-团队介绍
本文件详细介绍了html的简介、基本结构、标记、使用....
企业介绍单页html模板是一款简单实用的bootstrap模板下载。
目录 1、HTML5概述 2、HTML5支持情况 3、HTML5开发工具 4、HTML5特性介绍 5、WEB GL 6、HTML5与Silverlight4.0、Flash 7、HTML5未来发展趋势 8、八大浏览器Html5支持细节列表 9、参考书籍
Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...
2)自我介绍 注:运用表格布局 3)我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注:综合运用框架、DIV+CSS布局 4)我的相册 快乐的童年、校园生活 等 5)雁过留声(表单) 用表单制作一个留言...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本,去除了短信注册接收验证码(当然也可以加),充值对接了Z支付个人...
html+js+css自我介绍,滑动滚轮进行界面的更换
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
通过asp实现asp转换成html的方法介绍
纯 Html 开发的游戏介绍网站,可以介绍多种游戏的内容,解压压缩包后点击启动.bat文件即可快捷启动,源代码在 html 文件夹下,可用于网页设计类型的课程设计。
大学生静态网页设计期末作业川剧介绍的静态网页HTML源码带简单交互效果(必过) 一个关于川剧介绍的静态HTML网页,有着一些简单的交互效果,95分以上没问题啊,大作业必过,课程设计必过! 大学生静态网页设计期末...
struts2 标签库介绍(html)对Struts2的标签做了详细的介绍让你轻松掌握Struts2的标签。 STRUTS2学习文档.pdf 对Struts2的一些配置文件进行了详细的说明。 Struts2―表单验证validate(html)对validate的type属性...
HTML语言介绍 PPT 88页
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...