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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
DHTML Slide Show script图片轮换
Mar 03 Javascript
通过javascript设置css属性的代码
Dec 28 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python 中@property的用法详解
2020/01/15 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
医院护士专业个人的求职信
2013/12/09 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
新农村建设汇报材料
2014/08/15 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
公务员个人总结
2015/02/12 职场文书
法定授权委托证明书
2015/06/18 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书