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 相关文章推荐
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP排序算法类实例
2015/06/17 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python装饰器与递归算法详解
2016/02/18 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
电子商务专业个人的自我评价
2013/12/19 职场文书
医院检讨书范文
2014/02/01 职场文书
面试必备的求职信
2014/05/25 职场文书
小组口号大全
2014/06/09 职场文书
政协调研汇报材料
2014/08/15 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
体育个人工作总结
2015/02/09 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js