提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery实现的全选和反选

jQuery 实现 全选 反选
2023-06-13 09:14:09 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
#newsTable{margin:100pxauto;}
</style>
<scriptlanguage="javascript"type="text/javascript"src="jquery1.1.2.js"></script><!-上传到网络上用这个做连接-->
<scriptlanguage="javascript"type="text/javascript">
//阿会楠练习2009-4-13
$(document).ready(function(){
$("#btnOk").click(function(){
this.value=this.value=="全选"?"反选":"全选";
$("input[@type="checkbox"]").checkCbx();
});
});
//当你的代码出现each时，你应该重写上面的代码来构造一个插件,jquery教程中的一句话
$.fn.checkCbx=function(){
returnthis.each(function(){
this.checked=!this.checked;
});
}
</script>
<title>无标题文档</title>
</head>

<body>
<tableborder="1"id="newsTable">
<tr>
<th>选择</th>
<th>Id</th>
<th>作者</th>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>1</td>
<td>阿会楠</td>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>2</td>
<td>阿会楠</td>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>3</td>
<td>阿会楠</td>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>4</td>
<td>阿会楠</td>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>5</td>
<td>阿会楠</td>
</tr>
<tr>
<td><inputtype="checkbox"name="cbx"/></td>
<td>6</td>
<td>阿会楠</td>
</tr>
<tr>
<tdcolspan="3"><inputtype="button"name="btnOk"id="btnOk"value="全选"/></td>
</tr>
</table>
</body>
</html>

相关文章