jquery做全选反选

来源:互联网 发布:淘宝物流助手在哪里 编辑:程序博客网 时间:2024/05/16 19:46

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <style type="text/css">
    img
    {
        width:50px; height:50px;
        }
        table
        {
           width:600px; height:400px;
           }
           table tr td{ border:solid 1px #eee;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#Checkbox7').click(function () {
            //一种方法
                /*if ($(this).is(':checked') == true) {
                $('#table1 input[type=checkbox]').attr('checked', true);
                }
                else {
                $('#table1 input[type=checkbox]').attr('checked',false);
                }*/
                $('#table1 input[type=checkbox]').attr('checked', $(this).is(':checked'));
                $('#table1 input[type=checkbox]').attr('checked', this.checked);
                if (this.checked) {
                    $('#sp1').text('取消全选');
                }
                else {
                    $('#sp1').text('全选');
                }
            })
            $('#Checkbox8').click(function () {
            //第一种方法
                /*var checknum = $('#table1 input[type=checkbox]');
                for (var i = 0; i < checknum.length; i++) {
                if (checknum[i].checked) {
                checknum[i].checked = false;
                }
                else {
                checknum[i].checked = true;
                }
                }*/
                var allcheck = $('#table1 input[type=checkbox]');
                allcheck.each(function () {
                    if ($(this).is(':checked')) {
                        $(this).attr('checked', false);
                    }
                    else {
                        $(this).attr('checked',true);
                    }
                })
            })
        })
      
    </script>
</head>
<body>
<div>
    <input id="Checkbox7" type="checkbox"/><span id="sp1">全选</span><input id="Checkbox8" type="checkbox" />反选</div>
    <table id="table1">
        <tr>
            <td>
                操作
            </td>
            <td>
                编号
            </td>
            <td>
                名称
            </td>
            <td>
                作者
            </td>
            <td>
                封面
            </td>
            <td>
                单价
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" />
            </td>
            <td>
                001
            </td>
            <td>
                三国演义
            </td>
            <td>
                罗贯中
            </td>
            <td>
                <img src="images/2.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" />
            </td>
            <td>
                002
            </td>
            <td>
                西游记
            </td>
            <td>
                吴承恩
            </td>
            <td>
                <img src="images/3.jpg" />
            </td>
            <td>
                40
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" />
            </td>
            <td>
                003
            </td>
            <td>
                水浒传
            </td>
            <td>
                施耐庵
            </td>
            <td>
                <img src="images/4.jpg" />
            </td>
            <td>
                50
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" />
            </td>
            <td>
                004
            </td>
            <td>
                红楼梦
            </td>
            <td>
                曹雪芹
            </td>
            <td>
                <img src="images/1.jpg" />
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" />
            </td>
            <td>
                005
            </td>
            <td>
                家
            </td>
            <td>
                巴金
            </td>
            <td>
                <img src="images/2.jpg" />
            </td>
            <td>
                45
            </td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox6" type="checkbox" />
            </td>
            <td>
                006
            </td>
            <td>
                茶馆
            </td>
            <td>
                老舍
            </td>
            <td>
                <img src="images/3.jpg" />
            </td>
            <td>
                35
            </td>
        </tr>
    </table>


</body>
</html>