js教程

jquery批量全选和反选教程

我的站长站 2023-03-13 共人阅读

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="删除">
    <table border=1>
        <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>打两份工</td>
                <td>真的很高</td>
                <td><button>删除</button></td>
            </tr>
        </tbody>
    </table>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function(){
        $("input[type=button]").click(function(){
            $("tbody").find("input:checkbox:checked").each(function() { // 遍历选中的checkbox
                n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
                $("tbody").find("tr:eq("+n+")").remove();
            });
        });
    });
    $(function(){
        $("thead").find("input[type=checkbox]").click(function(){
            var flag = $(this).prop("checked"); 
            $("tbody").find("input[type=checkbox]").each(function() { // 遍历选中的checkbox
                $(this).prop("checked",flag);
            });
        });
    });
</script>
</html>

jquery教程

上一篇：AjaxFileUpload文件上传示例代码

下一篇：ajaxFileUpload上传实例代码教程

js教程

jquery批量全选和反选教程

Gridstack.js交互式仪表板Typescript库

王者荣誉英雄战力在线查询API接口和JS查询方法

js截取字符串教程

find findIndex indexOf索引选择器使用方法

js复制网页内容教程