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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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中实现记住密码自动登录的代码
2011/03/02 PHP
php检查页面是否被百度收录
2015/10/28 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python常用模块之requests模块用法分析
2019/05/15 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python2和python3哪个使用率高
2020/06/23 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
供电工程专业求职信
2014/08/09 职场文书
护士求职自荐信范文
2015/03/04 职场文书
消防演习通知
2015/04/25 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript