js获取单选框或复选框值及操作


Posted in Javascript onDecember 18, 2012
<script> 
function checkbox() 
{ 
var str=document.getElementsByName("box"); 
var objarray=str.length; 
var chestr=""; 
for (i=0;i<objarray;i++) 
{//欢迎来到三水点靠木,我们的网址是3water.com,很好记,三水点靠木,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。 
if(str[i].checked == true) 
{ 
chestr+=str[i].value+","; 
} 
}//欢迎来到三水点靠木,我们的网址是3water.com,很好记,三水点靠木,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。 
if(chestr == "") 
{ 
alert("请先选择一个爱好~!"); 
} 
else 
{ 
alert("您先择的是:"+chestr); 
} 
} 
</script> 
<a href="<#ZC_BLOG_HOST#>">三水点靠木</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr> 
<!--欢迎来到三水点靠木,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:3water.com,,用.net打造靓站--> 
选择您的爱好: 
<input type="checkbox" name="box" id="box1" value="跳水" />跳水 
<input type="checkbox" name="box" id="box2" value="跑步" />跑步 
<input type="checkbox" name="box" id="box3" value="听音乐" />听音乐 
<input type="button" name="button" id="button" onclick="checkbox()" value="提交" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="all"> 
label{ 
cursor:pointer; 
font-size:12px; 
margin:0px 2px 0px 0px; 
color:#2B86BD; 
} 
.d0{ 
margin-bottom:30px; 
} 
.d0 input{ 
cursor:pointer; 
margin:0px; 
padding:0px 2px; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
var dr=document.getElementsByTagName("div"),i,t=""; 
function submit1(num,type){ 
t=""; 
var dri=dr[num].getElementsByTagName("input"); 
for(i=0;i<dri.length;i++){ 
if(dri[i].checked){ 
if(type==0){ 
alert(dri[i].value); 
break; 
}else{ 
t=t+dri[i].value+";"; 
} 
} 
} 
if(type==1) alert(t); 
} 
//ChangeSelect 
submit1.allselect=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
drc[i].checked=true; 
} 
} 
//allNot 
submit1.allNot=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
drc[i].checked=false; 
} 
} 
//reverse 
submit1.reverseSelect=function(){ 
var drc=dr[1].getElementsByTagName("input"); 
for(i=0;i<drc.length;i++){ 
if(drc[i].checked){ 
drc[i].checked=false; 
}else{ 
drc[i].checked=true; 
} 
} 
} 
</script> 
<title>js获取单选框、复选框的值及操作</title> 
</head> 
<body> 
<div class="d0"> 
<input type="radio" name="day" id="r0" value="前天"/><label for="r0">前天</label> 
<input type="radio" name="day" id="r1" value="昨天"/><label for="r1">昨天</label> 
<input type="radio" name="day" id="r2" checked="checked" value="今天"/><label for="r2">今天</label> 
<input type="radio" name="day" id="r3" value="明天"/><label for="r3">明天</label> 
<input type="radio" name="day" id="r4" value="后天"/><label for="r4">后天</label> 
<button type="button" onclick="submit1(0,0)" >提交</button> 
</div> 
<div> 
<input type="checkbox" value="前年" onclick="alert(this.value);"/><label>前年</label> 
<input type="checkbox" value="去年" onclick="submit1(1,1);"/><label>去年</label> 
<input type="checkbox" value="今年" /><label>今年</label> 
<input type="checkbox" value="明年"/><label>明年</label> 
<input type="checkbox" value="后年"/><label>后年</label> 
<button type="button" onclick="submit1(1,1)" >提交</button> 
<button type="button" onclick="submit1.allselect()" >全选</button> 
<button type="button" onclick="submit1.reverseSelect()" >反选</button> 
<button type="button" onclick="submit1.allNot()" >全不选</button> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
cookie的secure属性详解
Apr 08 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
DOM事件探秘篇
Feb 15 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 #Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 #Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 #Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 #Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 #Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 #Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 #Javascript
You might like
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
koa源码中promise的解读
2018/11/13 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
房产公证书范本
2014/04/10 职场文书
个人收入证明范本
2014/09/18 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
毕业生评语大全
2015/01/04 职场文书
英语通知范文
2015/04/22 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
Go语言基础map用法及示例详解
2021/11/17 Golang