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 相关文章推荐
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
vue实现文字加密功能
Sep 27 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中feof()函数实例测试
2014/08/23 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python多进程fork()函数详解
2019/02/22 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
实习生求职自荐信
2014/02/07 职场文书
出纳担保书范文
2014/04/02 职场文书
工作证明格式及范本
2014/09/12 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
保安辞职信范文
2015/02/28 职场文书
写给女朋友的保证书
2015/05/09 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
MySQL如何解决幻读问题
2021/08/07 MySQL
nginx容器方式反向代理实战
2022/04/18 Servers