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笔记 String类replace函数的一些事
Sep 22 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
使用JavaScript实现贪吃蛇游戏
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
sphinx增量索引的一个问题
2011/06/14 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jQuery功能函数详解
2015/02/01 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python字符串中的单双引
2017/02/16 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
院药学专业个人求职信
2013/09/21 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
法人委托书范本格式
2014/09/15 职场文书
收款授权委托书
2014/10/02 职场文书
承诺书范本
2015/01/21 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python