<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>
分享到：
相关推荐
这个"团队介绍html.zip"文件提供了一个HTML团队模板，适用于展示多人团队项目和个人介绍，帮助用户快速创建专业且吸引人的在线团队展示页面。PUDN（Programmers University Developer Network）是一个程序员和开发者...
### HTML5介绍 #### 什么是HTML5？ HTML5是一种用于构建网页的标准标记语言，它不仅扩展了HTML4的功能，还引入了许多新特性来增强网页的表现力和交互性。HTML5的发展始于2004年，由WHATWG（Web Hypertext ...
2. CSS选择器：CSS通过选择器来定位HTML元素，如类选择器（`.classname`）、ID选择器（`#idname`）、标签选择器（`element`）和后代选择器（`parent > child`）等，以便应用样式。 3. 布局技术：CSS Flexbox和Grid...
《程序猿炫酷个人介绍HTML源码》是一个专为程序员设计的、用于展示个人技能和经验的网页模板。这个源码充分利用了HTML5的新特性，结合CSS3的动画效果，打造出一个充满科技感且交互性强的个人简历页面。在Web开发领域...
旅游景区介绍html5模板是一款旅行社旅游景点介绍旅游线路规划网站模板下载。
【企业介绍单页HTML模板】是一种专为展示企业信息而设计的网页模板，它基于流行的前端框架Bootstrap构建，提供了一种高效、快捷的方式来创建专业且吸引人的企业官方网站。Bootstrap是Twitter开发的一个开源工具，...
这个名为"html+js+css自我介绍"的项目，显然利用这三种语言创建了一个动态的个人简历展示页面，其中包含了滑动滚轮效果来切换不同的界面内容。让我们详细探讨一下这三个关键元素以及它们如何协同工作来实现这样的...
HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础。它是一种用于创建和展示网页的标准标记语言，让信息以结构化的方式呈现，并可以与样式表（CSS）和脚本语言（如JavaScript）结合使用，...
漂亮大气VIP会员介绍页面 html单页源码无需数据库 扒的某站漂亮大气VIP会员介绍页面 html单页源码无需数据库 刚流出的众人帮任务悬赏平台新UI版本，去除了短信注册接收验证码（当然也可以加），充值对接了Z支付个人...
Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...
本课程设计项目是一个基于HTML构建的游戏介绍网站，旨在教授学生如何使用HTML、CSS等前端技术来创建一个功能齐全、信息丰富的网页平台。这个网站能够展示各种游戏的信息，包括游戏简介、截图、攻略等内容，为用户...
2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言...
适合向非IT人员讲解HTML5，也可向IT交流代码。主要内容是详细介绍HTML5更新内容，代码应用
<li><a href="jieshao.html">介绍</a></li> <li><a href="jingdian.html">景点</a></li> <li><a href="meishi.html">美食</a></li> <div class="banner"><img src="images/banner_1.jpg"/> <!-- 内容 --> ...
### 2. 使用DIV+CSS布局 - **DIV+CSS布局**: 是一种流行的网页布局方式，通过使用 `<div>` 标签配合CSS样式来实现网页的布局。这种方式具有良好的灵活性和可维护性，尤其适用于响应式设计，能够适应不同屏幕尺寸的...
大学生静态网页设计期末作业川剧介绍的静态网页HTML源码带简单交互效果（必过） 一个关于川剧介绍的静态HTML网页，有着一些简单的交互效果,95分以上没问题啊，大作业必过，课程设计必过！ 大学生静态网页设计期末...
【旅游景区介绍网站html整站】是一个完整的网页设计项目，它专为展示旅游景区信息而构建，包含丰富的内容，可以直接应用于实际的在线平台。这个资源对于那些需要快速搭建旅游类网站的开发者来说非常实用，无需从零...
【标题】：“基于HTML5的Web前端设计（旅游景点介绍）” HTML5是现代Web开发的核心，它在传统的HTML4基础上引入了许多新特性，增强了网页的交互性和动态性。在这个项目中，我们主要关注如何利用HTML5进行网页设计，...
这套HTML源代码文件是一个完整的网页模板，适用于各种类型的网站。它采用了最新的HTML5和CSS3技术，具有响应式设计，能够适应不同设备的屏幕尺寸。此外，它还包含了丰富的JavaScript插件，可以实现各种复杂的交互...
struts2 标签库介绍（html）对Struts2的标签做了详细的介绍让你轻松掌握Struts2的标签。 STRUTS2学习文档.pdf 对Struts2的一些配置文件进行了详细的说明。 Struts2―表单验证validate（html）对validate的type属性...