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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
微信小程序实现页面左右滑动
Nov 16 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
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
curl和libcurl的区别简介
2015/07/01 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python获取代理IP的实例分享
2018/05/07 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
积极分子思想汇报
2014/01/04 职场文书
八年级数学教学反思
2014/01/31 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python