Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 Jquery 1.42 checkbox 全选和反选代码

Jquery 1.42 checkbox 全选和反选代码

发布时间:2013-08-22   编辑:www.jquerycn.cn
用jquery实现的checkbox全选和反选代码,需要的朋友可以参考下。
jquery实现的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>

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记,如有错误欢迎指出!

您可能感兴趣的文章:
JQuery实现全选与反选的二种方法
checkbox全选与反选简单代码
jquery遍历checkbox简单示例
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
JQuery checkbox全选的小例子
jQuery判断checkbox(复选框)是否选中、全选、反选
jquery checkbox复选框是否选中的检测代码
jquery获取复选框被选中的值
3分钟写出来的Jquery版checkbox全选反选功能
jquery全选、反选、将选中的表单值分割为字符串

[关闭]