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 相关文章推荐
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
JS如何生成随机验证码
Mar 02 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
使用python进行拆分大文件的方法
2018/12/10 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
日语专业推荐信
2013/11/12 职场文书
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
mysql 索引合并的使用
2021/08/30 MySQL