JQuery学习(4)全选反选功能的实现

最新推荐文章于 2024-01-23 19:19:19 发布

gongth_12

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量1.2k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/gongth_12/article/details/8836015

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

$(function () {
            $('#chkall').click(function () {
                /*if ($(this).is(':checked') == true) {
                $('table input[type=checkbox]').attr('checked', true);
                }
                else {
                $('table input[type=checkbox]').attr('checked', false);
                }*/
                //简单写法
                $('table input[type=checkbox]').attr('checked', $(this).is(':checked'));
                if (this.checked) {
                    $('#sp1').text('取消全选');
                }
                else {
                    $('#sp1').text('全选');
                }

 


                //alert($('#chkall').attr('checked'));
                //另一种方法，使用js获取全选复选框的选中状态
                //$('table input[type=checkbox]').attr('checked',this.checked);
            })
            $('#chkrevert').click(function () {
                //方法1：
                /*var allcheck = $('table input[type=checkbox]');
                for (var i = 0; i < allcheck.length; i++) {
                if (allcheck[i].checked) {
                allcheck[i].checked = false;
                }
                else {
                allcheck[i].checked = true;
                }
                }*/

                var allcheck = $('table input[type=checkbox]');
                allcheck.each(function () {
                    if ($(this).is(':checked')) {
                        $(this).attr('checked', false);
                    }
                    else {
                        $(this).attr('checked', true);
                    }
                })
            })

  <input id="chkall" type="checkbox" /><span id="sp1">全选</span><input id="chkrevert" type="checkbox" />反选</div>
    <table>
        <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/5.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/6.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/7.jpg" />
            </td>
            <td>
                35
            </td>
        </tr>
    </table>