checkbox使用示例


Posted in Javascript onAugust 23, 2013
<html> 
<head> 
<title> 
checkbox测试 
</title> 
<script type='text/javascript' src='jquery-1.8.2.min.js'></script> <script type="text/javascript"> 
$(document).ready(function(){ 
$("#all").change(function() { 
//alert($("#all").val()); //获得checkbox的值 
// alert($("#all").get(0).checked); //值为true 和false 
if($("#all").get(0).checked){ //将jquery对象转化为dom对象 使用的是dom对象的属性 
$(":checkbox").attr({ 
//checked: 'checked' 可以和下面一句替换 
"checked":true 
}); 
}else{ 
//$(":checkbox").removeAttr('checked'); 可以和下面一句替换 
$(":checkbox").attr({ 
"checked":false 
}); 
} 
//第一种操作数组方法 
/* //each(function()) 函数 
var arr=new Array(); //一般处理是checkbox中值用数组表示 传递到后台 
var i=0; 
$(":checkbox").each(function(index){ 
if($(this).val()=="1"){ 
return true; 
} 
arr[i]=$(this).val(); 
alert(i +"前面是下标后面是值"+ arr[i++]); //获得checkbox 值 
}); */ 
//第二种操作数组方法 
var arr= new Array(); 
$(":checkbox").each(function(index){ 
if($(this).val()!="1"){ 
arr.push($(this).val()); 
} 
}); 
//组个输出数组值 
for(var j=0;j<arr.length;j++){ 
alert(arr[j]); 
} 
var str=arr.join(","); //将数组用,好连接成为字符串 
alert(str); //输出字符串 
}); 
}); 
</script> 
</head> 
<body> 
<input type='checkbox' id='all' value='1' />全选<br /> 
<input type='checkbox' id='all1' value='2' />num1<br /> 
<input type='checkbox' id='all2' value='3' />num2<br /> 
<input type='checkbox' id='all3' value='4' />num3<br /> 
<input type='checkbox' id='all5' value='5' />num4<br /> 
</body> 
</html>
Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 #Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 #Javascript
JS获取地址栏参数的小例子
Aug 23 #Javascript
jquery利用ajax调用后台方法实例
Aug 23 #Javascript
点击进行复制的JS代码实例
Aug 23 #Javascript
关于JS中的闭包浅谈
Aug 23 #Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 #Javascript
You might like
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Python自动连接ssh的方法
2015/03/07 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python3中的md5加密实例
2018/05/29 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
相亲活动方案
2014/08/26 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python