您的位置：首页 > Web前端 > JQuery

Jquery实现全选反选功能

2011-01-06 22:08 726 查看

下面用jquery写个小demo来实现全选反选功能，

以下是html代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<script src="jquery-1.3.1.js" mce_src="jquery-1.3.1.js" type="text/javascript"></script>
<head runat="server">
<title>demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input  id="checkall" type="checkbox" />全选/反选
<br />
<input name="checkboxname" type="checkbox"/>
<br />
<input name="checkboxname" type="checkbox"/>
<br />
<input name="checkboxname" type="checkbox"/>
<br />
<input name="checkboxname" type="checkbox"/>
<br />
<input name="checkboxname" type="checkbox"/>
<br />
<input name="checkboxname" type="checkbox"/>
<br />
</div>
</form>
</body>
</html>

以下js代码

<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#checkall").click(function(){
if($(this).attr("checked") == true){
$("input[name='checkboxname']").each(function(){
$(this).attr("checked",true);
});
}else{
$("input[name='checkboxname']").each(function(){
$(this).attr("checked",false);
});
}
});
});
<script>

这样一个简单的全选反选功能就完成了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航