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 常用操作方法
Jan 28 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
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
mysql建立外键
2006/11/25 PHP
PHP Pear 安装及使用
2009/03/19 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
Python的净值数据接口调用示例分享
2016/03/15 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
解决Django no such table: django_session的问题
2020/04/07 Python
html5与css3小应用
2013/04/03 HTML / CSS
《商鞅南门立木》教学反思
2014/02/16 职场文书
学习决心书范文
2014/03/11 职场文书
关于环保的建议书400字
2014/03/12 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
项目申请汇报材料
2014/08/16 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
2014年导购员工作总结
2014/11/18 职场文书
学生病假条怎么写
2015/08/17 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android