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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
vue设置默认首页的操作
Aug 12 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中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP输入流php://input介绍
2012/09/18 PHP
php树型类实例
2014/12/05 PHP
浅析PHP文件下载原理
2014/12/25 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
JQuery从头学起第二讲
2010/07/04 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JS 表单验证大全
2011/11/23 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
vue实现图片上传功能
2020/05/28 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python 实现堆排序算法代码
2012/06/05 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python如何爬取个性签名
2018/06/19 Python
python绘制中国大陆人口热力图
2018/11/07 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
家长会学生演讲稿
2014/04/26 职场文书
68句权威创业名言
2019/08/26 职场文书