目录

实现功能

简单的全选功能

Jquery - 实现全选功能

代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
  <style>
    .tab{width:90%;margin:0 auto ;background:#c0c0c0; }
    .tab tr{background:#fff;height:25px;}
    .tab tr:hover{background:#efefef;}
    .tab td {padding:0px 5px;}
    .ipt{margin:10px 10px 10px 20px;}
    td{height:40px;}
 </style>
 <script src="jquery.min.js"></script>
 <script>
    $(function(){
        $("#ckAll").click(function(){
            $("[name='ck']").prop("checked",this.checked);
        });
    });
 </script>
 <body>
 <form name="f2" action="" method="post"><div class="ipt"><input type="button" value="删除"></div>
     <table class="tab" border="0" cellpadding="1" cellspacing="1">
        <tr>
            <td width="30" align="center">
                <input type="checkbox" id="ckAll">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" name="ck">
            </td>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" name="ck">
            </td>
            <td>李四</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" name="ck">
            </td>
            <td>王五</td>
            <td>男</td>
            <td>11</td>
        </tr>
        <tr>
            <td align="center">
                <input type="checkbox" name="ck">
            </td>
            <td>陈六</td>
            <td>男</td>
            <td>22</td>
        </tr>
     </table>
 <form>
 </body>
</html>