jquery 实现的全选和反选
生活已是百般艰难,为何不努力一点。下面图老师就给大家分享jquery 实现的全选和反选,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
style type="text/css"
#newsTable{margin:100px auto;}
/style
script language="javascript" type="text/javascript" src="jquery1.1.2.js"/script!-上传到网络上用这个做连接--
script language="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(){
return this.each(function(){
this.checked = !this.checked;
});
}
/script
title无标题文档/title
/head
body
table border="1" id="newsTable"
tr
th选择/th
thId/th
th作者/th
/tr
tr
tdinput type="checkbox" name="cbx" //td
td1/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td2/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td3/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td4/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td5/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td6/td
td阿会楠/td
/tr
tr
td colspan="3"input type="button" name="btnOk" id="btnOk" value="全选" //td
/tr
/table
/body
/html