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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
jQuery实现文档树效果
Feb 20 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 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设计模式之单例模式实例分析
2015/02/25 PHP
php生成word并下载代码实例
2019/03/15 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python命令行click参数用法解析
2019/12/19 Python
python 实现屏幕录制示例
2019/12/23 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
中学教师请假制度
2014/02/03 职场文书
班级德育工作实施方案
2014/02/21 职场文书
经典广告词大全
2014/03/14 职场文书
企业宣传标语
2014/06/09 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL