Jquery 1.42 checkbox 全选和反选代码


Posted in Javascript onMarch 27, 2010

Jquery代码

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
function Checked(){ //定义函数checked 
$(".chk").each(function(){ //遍历html中class为chk的复选框标签 
if($(this).attr("checked") == true){ //如果当前复选框的checked属性为true 
$(this).attr("checked",false); //将该属性改为false 
} 
else{ //如果当前复选框的checked属性为false 
$(this).attr("checked",true); //将该属性改为true 
} 
}); 
if($("#lbl").html() == "全选"){ //修改label的文本为“反选” 
$("#lbl").html("反选"); 
} 
else if($("#lbl").html() == "反选"){ //修改label的文本为“全选” 
$("#lbl").html("全选"); 
} 
} 
$(document).ready(function(){ //为label添加click事件执行函数checked 
$("#lbl").bind("click",Checked); 
}) 
</script>

Html代码
<label id="lbl">全选</label> 
<table> 
<tr> 
<td> 
<input type="checkbox" class="chk" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="checkbox" class="chk" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="checkbox" class="chk" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="checkbox" class="chk" /> 
</td> 
</tr> 
<tr> 
<td> 
<input type="checkbox" class="chk" /> 
</td> 
</tr> 
</table>

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记,如有错误欢迎指出!
Javascript 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
详解小程序循环require之坑
Mar 08 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 #Javascript
JQuery的一些小应用收集
Mar 27 #Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 #Javascript
Jquery 滑入滑出效果实现代码
Mar 27 #Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 #Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 #Javascript
Javascript 函数中的参数使用分析
Mar 27 #Javascript
You might like
laravel配置Redis多个库的实现方法
2019/04/10 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
Python实现学生成绩管理系统
2020/04/05 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
django项目中新增app的2种实现方法
2020/04/01 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
证婚人经典证婚词
2014/01/09 职场文书
生活部的活动方案
2014/08/19 职场文书
改革共识倡议书
2014/08/29 职场文书
承诺函格式模板
2015/01/21 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
《落花生》教学反思
2016/02/16 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS