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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
vue 监听屏幕高度的实例
Sep 05 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 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结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
不安全的常用的js写法
2009/09/15 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Python中的super用法详解
2015/05/28 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python devel安装失败问题解决方案
2020/06/09 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
骨干教师培训制度
2014/01/13 职场文书
历史学专业求职信
2014/06/19 职场文书
抗震救灾标语
2014/06/26 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
仓库管理制度范本
2015/08/04 职场文书
2017春节晚会开幕词
2016/03/03 职场文书