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 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
js获取php变量的实现代码
Aug 10 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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 include的妙用,实现路径加密
2008/07/29 PHP
解析strtr函数的效率问题
2013/06/26 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
python制作一个桌面便签软件
2015/08/09 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
元旦晚会感言
2014/03/12 职场文书
授权委托书格式范文
2014/08/02 职场文书
解放思想演讲稿
2014/09/11 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
海上钢琴师观后感
2015/06/03 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL