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 相关文章推荐
JS中的public和private对象,即static修饰符
Jan 18 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
初一英语教学反思
2014/01/11 职场文书
保护环境建议书100字
2014/05/13 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
学习党章的体会
2014/11/07 职场文书
永不妥协观后感
2015/06/10 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
如何解决php-fpm启动不了问题
2021/11/17 PHP
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Python+Tkinter制作专属图形化界面
2022/04/01 Python