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 学习之旅 (1)
Feb 05 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue配置接口域名方法总结
May 12 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Python机器学习之决策树和随机森林
Jul 15 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版)
2006/10/09 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
python简单实现旋转图片的方法
2015/05/30 Python
让Python代码更快运行的5种方法
2015/06/21 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python实现电子词典
2020/03/03 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
delegate与普通函数的区别
2014/01/22 面试题
求职毕业生自荐书
2014/02/08 职场文书
《石榴》教学反思
2014/03/02 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
董事长助理工作职责
2014/06/08 职场文书
个人年终总结怎么写
2015/03/09 职场文书
建党伟业观后感
2015/06/01 职场文书
感谢信
2019/04/11 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers