jQuery实现点击复选框即高亮显示选中行 全选、反选.docx

jQuery实现点击复选框即高亮显示选中行全选、反选!DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Strict//EN?/TR/xhtml1/DTD/xhtml1-strict.dtdhtml?xmlns=/1999/xhtml?xml:lang=en?lang=enheadtitlejQuery实现点击复选框即高亮显示选中行?全选、反选/title?style?type=text/css?table{?border:0;border-collapse:collapse;}?td{?font:normal?12px/17px?Arial;padding:2px;width:100px;}?th{?font:bold?12px/17px?Arial;text-align:left;padding:4px;border-bottom:1px?solid?#333;}?.even{?background:#FFF38F;}??/*?偶数行样式*/?.odd{?background:#FFFFEE;}??/*?奇数行样式*/?.selected{?background:#FF6500;color:#fff;}?/stylescript?src=res/jquery-1.7.1.min.js?type=text/javascript/script?script?type=text/javascript?//插件编写?(function?($)?{?????$.fn.extend({?????????alterBgColor:?function?(options)?{?????????????//设置默认值?????????????options?=?$.extend({?????????????????odd:?odd,?/*?偶数行样式*/?????????????????even:?even,?/*?奇数行样式*/?????????????????selected:?selected?/*?选中行样式*/?????????????},?options);?????????????$(tbodytr:odd,?this).addClass(options.odd);?????????????$(tbodytr:even,?this).addClass(options.even);?????????????$(tbodytr,?this).click(function?()?{?????????????????//判断当前是否选中?????????????????var?hasSelected?=?$(this).hasClass(options.selected);?????????????????//如果选中，则移出selected类，否则就加上selected类?????????????????$(this)[hasSelected???removeClass?:?addClass](options.selected)?????????????????//查找内部的checkbox,设置对应的属性。??????.find(:checkbox).attr(checked,?!hasSelected);?????????????});?????????????//表头中的checkbox?（全选?反选）?????????????$(theadtr?th:first?:checkbox:first?).click(function?()?{?????????????????//判断当前是否选中?????????????????var?hasSelected?=?$(this).attr(checked);?????????????????//如果选中，则移出selected类，否则就加上selected类?????????????????$(tbodytr)[!hasSelected???removeClass?:?addClass](options.selected);?????????????????if?(hasSelected)?????????????????????$(tbodytr?:checkbox).attr(checked,true);?????????????????else????????????????????$(tbodytr?:checkbox).attr(checked,false);?????????????});?????????????//?如果单选框默认情况下是选择的，则高色.?????????????$(tbodytr:has(:checked),?thi