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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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 URL路由类实例
2013/11/12 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
小学教学随笔感言
2014/02/26 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
企业安全生产标语
2014/06/06 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书