这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 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" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <link href="CSS/style.css" rel="stylesheet" type="text/css" />
- <script src="../scripts/jquery-1.3.1.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- $(function() {
- $("tbody>tr:odd").addClass("odd");
- $("tbody>tr:even").addClass("even");
- $('tbody>tr').click(function() {
- var hasSelected = $(this).hasClass('selected');
- $(this)[hasSelected ? "removeClass": "addClass"]('selected').find(':checkbox').attr('checked', !hasSelected);
- });
- $('tbody>tr:has(:checked)').addClass('selected');
- })
- </script>
- </head>
- <body>
- <table>
- <thead>
- <tr>
- <th>
- </th>
- <th>
- s
- </th>
- <th>
- sd
- </th>
- <th>
- sdasdsa sda
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" />
- </td>
- <td>
- s
- </td>
- <td>
- s
- </td>
- <td>
- sdadsadsd
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" />
- </td>
- <td>
- sadasdsd
- </td>
- <td>
- s
- </td>
- <td>
- sads
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" checked='checked' />
- </td>
- <td>
- sas
- </td>
- <td>
- s
- </td>
- <td>
- aasdsad sad
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" />
- </td>
- <td>
- ss
- </td>
- <td>
- ssad
- </td>
- <td>
- dadsadsad
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" />
- </td>
- <td>
- Rain
- </td>
- <td>
- sd
- </td>
- <td>
- sdsad sad asd
- </td>
- </tr>
- <tr>
- <td>
- <input type="checkbox" name="choice" value="" />
- </td>
- <td>
- MAXMAN
- </td>
- <td>
- s
- </td>
- <td>
- 实打实的速度是
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
radio 写法:
- $(function() {
- $("tbody>tr:odd").addClass("odd");
- $("tbody>tr:even").addClass("even");
- $('tbody>tr').click(function() {
- $(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked', true);
- });
- // $('table :radio:checked').parent().parent().addClass('selected');
- $('table :radio:checked').parents("tr").addClass('selected');
- //$('tbody>tr:has(:checked)').addClass('selected');
- })
checkbox 写法:
- $(function() {
- $("tbody>tr:odd").addClass("odd");
- $("tbody>tr:even").addClass("even");
- $('tbody>tr').click(function() {
- if ($(this).hasClass('selected')) {
- $(this).removeClass('selected').find(':checkbox').attr('checked', false);
- } else {
- $(this).addClass('selected').find(':checkbox').attr('checked', true);
- }
- });
- // $('table :checkbox:checked').parent().parent().addClass('selected');
- $('table :checkbox:checked').parents("tr").addClass('selected');
- //$('tbody>tr:has(:checked)').addClass('selected');
- })
来源: http://www.phperz.com/article/17/0715/269487.html