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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
vue 递归组件的简单使用示例
Jan 14 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
小学生读书感言
2014/02/12 职场文书
护理专业求职信
2014/06/15 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
小学运动会宣传稿
2015/07/23 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python