通过checkbox复选框控制层的显示隐藏
阅读次代码如下：
<html>
<head><title></title>
<META content = "text/html; charset = gb2312" http-equiv = Content-Type>
<META content = "MSHTML 5.00.2919.6307" name = GENERATOR>
<script type="text/javascript">
window.onload=function(){setInterval("show()",1000)}
function show(){
var ifcheck=document.getElementById("ck");
var showdiv=document.getElementById("dd");
if(ifcheck.checked)
{showdiv.style.display="none";}
else
{showdiv.style.display="block";}
}
</script>
</head>
<body>
<div>
<input type="checkbox" id="ck"/>显示/隐藏
</div>
<div id="dd" style="border:1px solid black;width:300px;height:300px;background-color:gray;">
这是通过checkbox节制其显示/隐藏的div
</div>
</body>
</html>jQuery实现点击复选框即高亮显示选中行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en"> <head> <title>jQuery实现点击复选框即高亮显示选中行</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;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> //插件编写 ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 options=$.extend({ odd:"odd", /* 偶数行样式*/ even:"even", /* 奇数行样式*/ selected:"selected" /* 选中行样式*/ },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $('tbody>tr',this).click(function() { //判断当前是否选中 var hasSelected=$(this).hasClass(options.selected); //如果选中，则移出selected类，否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"](options.selected) //查找内部的checkbox,设置对应的属性。 .find(':checkbox').attr('checked',!hasSelected); }); // 如果单选框默认情况下是选择的，则高色. $('tbody>tr:has(:checked)',this).addClass(options.selected); return this; //返回this，使方法可链。 } }); })(jQuery); //插件应用 $(function(){ $("#table2") .alterBgColor() //应用插件 .find("th").css("color","red");//可以链式操作 }) </script> </head> <body> <table id="table2"> <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead> <tbody> <tr> <td><input type="checkbox" name="choice" value=""/></td> <td>张三</td> <td>男</td> <td>浙江宁波</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>李四</td> <td>女</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>王五</td> <td>男</td> <td>湖南长沙</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>赵六</td> <td>男</td> <td>浙江温州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" /></td> <td>Rain</td> <td>男</td> <td>浙江杭州</td> </tr> <tr> <td><input type="checkbox" name="choice" value="" checked="checked" /></td> <td>MAXMAN</td> <td>女</td> <td>浙江杭州</td> </tr> </tbody> </table> </body> </html>
运行本代码，需加载jQ文件
