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 相关文章推荐
javascript之AJAX框架使用说明
Apr 24 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
react中hook介绍以及使用教程
Dec 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
个人党性分析总结
2015/03/05 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python