jquery 实现的全选和反选

大贤良师2

大贤良师2

2016-02-19 16:05

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享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
展开更多 50%)
分享

猜你喜欢

jquery 实现的全选和反选

Web开发
jquery 实现的全选和反选

jquery全选,jquery全不选,jquery反选

Web开发
jquery全选,jquery全不选,jquery反选

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Jquery 1.42 checkbox 全选和反选代码

Web开发
Jquery 1.42 checkbox 全选和反选代码

JQUERY CHECKBOX全选,取消全选,反选方法三

Web开发
JQUERY CHECKBOX全选,取消全选,反选方法三

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery checkbox全选反选效果代码

Web开发
jquery checkbox全选反选效果代码

jQuery checkbox全选/取消全选实现代码

Web开发
jQuery checkbox全选/取消全选实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

详解MySQL三项实用开发知识

详解MySQL三项实用开发知识

使用SQL Server动态管理视图确认缺失索引

使用SQL Server动态管理视图确认缺失索引
下拉加载更多内容 ↓