JQuery之全选与反选

本人学习所写，如有不好，请见谅

本次我给大家简绍的是JQuery的全选与反选的几种方法

代码如下

 //全选与反选
            $(".usertable th input[type='checkbox']").click(function () {
                //alert(11);
                //方法一你可以直接使用样式名   我们这样是为了学习选择器
                //$(".usertable td input[type='checkbox']").prop("checked", $(this).is(":checked"));

                //方法二
                //$(this).parent().parent().siblings().find("input[type='checkbox']").prop("checked", $(this).is(":checked"));

                //方法三
                if ($(this).is(":checked")) {
                    $(".usertable td input[type='checkbox']").prop('checked', true);
                } else {
                    $(".usertable td input[type='checkbox']").prop('checked', false);
                }
            })

下面的是网页代码供大家参考

<div>

        <table class="usertable">

            <tr class="theader">
                <th>
                    <input type="checkbox" id="headerchecked" /></th>
                <th>编号</th>
                <th>用户名</th>

                <th>国家</th>
                <th>街道</th>
                <th>城市</th>
                <th>操作</th>
            </tr>



            <tr>
                <td>
                    <input type="checkbox" /></td>
                <td>1</td>
                <td>Adams</td>
                <td>John</td>
                <td>Oxford Street</td>

                <td>London</td>
                <td><a href="#">删除</a>|<a href="#" class="update">修改</a></td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" /></td>
                <td>2</td>
                <td>Bush</td>
                <td>George</td>
                <td>Fifth Avenue</td>
                <td>New York </td>
                <td><a href="#">删除</a>|<a href="#" class="update">修改</a></td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" /></td>
                <td>3</td>
                <td>Carter</td>
                <td>Thomas</td>
                <td>Changan Street</td>
                <td>Beijing</td>
                <td><a href="#">删除</a>|<a href="#" class="update">修改</a></td>
            </tr>

            <tr>
                <td>
                    <input type="checkbox" /></td>
                <td>4</td>
                <td>Obama</td>
                <td>Barack</td>
                <td>Pennsylvania Avenue</td>
                <td>Washington</td>
                <td><a href="#">删除</a>|<a href="#" class="update">修改</a></td>
            </tr>

        </table>

    </div>