这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文将介绍下 checkbox list 选择及 checkbox table 选中附效果图,感兴趣的朋友可以参考下哈,希望可以帮助到你
1、checkbox list 选择
效果图:
代码:
2、checkbox table 选中
- <!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 runat="server">
- <title>
- </title>
- <script src="Scripts/jquery-1.7.min.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- $(function() {
- // 全选
- $("#btnCheckAll").bind("click",
- function() {
- $("[name = chkItem]:checkbox").attr("checked", true);
- });
- // 全不选
- $("#btnCheckNone").bind("click",
- function() {
- $("[name = chkItem]:checkbox").attr("checked", false);
- });
- // 反选
- $("#btnCheckReverse").bind("click",
- function() {
- $("[name = chkItem]:checkbox").each(function() {
- $(this).attr("checked", !$(this).attr("checked"));
- });
- });
- // 全不选
- $("#btnSubmit").bind("click",
- function() {
- var result = new Array();
- $("[name = chkItem]:checkbox").each(function() {
- if ($(this).is(":checked")) {
- result.push($(this).attr("value"));
- }
- });
- alert(result.join(","));
- });
- });
- </script>
- </head>
- <body>
- <div>
- <input name="chkItem" type="checkbox" value="今日话题" />
- 今日话题
- <input name="chkItem" type="checkbox" value="视觉焦点" />
- 视觉焦点
- <input name="chkItem" type="checkbox" value="财经" />
- 财经
- <input name="chkItem" type="checkbox" value="汽车" />
- 汽车
- <input name="chkItem" type="checkbox" value="科技" />
- 科技
- <input name="chkItem" type="checkbox" value="房产" />
- 房产
- <input name="chkItem" type="checkbox" value="旅游" />
- 旅游
- </div>
- <div>
- <input id="btnCheckAll" type="button" value="全选" />
- <input id="btnCheckNone" type="button" value="全不选" />
- <input id="btnCheckReverse" type="button" value="反选" />
- <input id="btnSubmit" type="button" value="提交" />
- </div>
- </body>
- </html>
效果图:
代码:
- <!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 runat="server">
- <title></title>
- <style type="text/CSS">
- table
- {
- border-collapse: collapse;
- }
- td
- {
- border: 1px solid #ccc;
- }
- </style>
- <script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- // chkAll全选事件
- $("#chkAll").bind("click", function () {
- $("[name = chkItem]:checkbox").attr("checked", this.checked);
- });
- // chkItem事件
- $("[name = chkItem]:checkbox").bind("click", function () {
- var $chk = $("[name = chkItem]:checkbox");
- $("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
- })
- });
- </script>
- </head>
- <body>
- <table id="tb">
- <thead>
- <tr>
- <td>
- <input id="chkAll" type="checkbox" />
- </td>
- <td>
- 分类名称
- </td>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="今日话题" />
- </td>
- <td>
- 今日话题
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="视觉焦点" />
- </td>
- <td>
- 视觉焦点
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="财经" />
- </td>
- <td>
- 财经
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="汽车" />
- </td>
- <td>
- 汽车
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="科技" />
- </td>
- <td>
- 科技
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="房产" />
- </td>
- <td>
- 房产
- </td>
- </tr>
- <tr>
- <td>
- <input name="chkItem" type="checkbox" value="旅游" />
- </td>
- <td>
- 旅游
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0421/280584.html