Jquery 1.42 checkbox 全选和反选代码

190 阅读 0 评论 126 点赞

我是靠谱客的博主呆萌向日葵，最近开发中收集的这篇文章主要介绍Jquery 1.42 checkbox 全选和反选代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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> 