Jquery - 实现全选功能

目录

实现功能

简单的全选功能

QQ截图20150425172830.png

代码

!!!markup
<!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>

文章最后编辑时间为:2015-11-09 17:28:01

标签: jquery

声明:本博客如无特殊说明皆为原创,转载请注明来源:Jquery - 实现全选功能谢谢!

相关文章

精彩评论
  1. 很佩服。望回访

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png