JQuery之全选与反选

淡淡的烟草味﹌ 2022-09-26 11:51 198阅读 0赞

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

本次我给大家简绍的是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>