如何HTML5的表格全选

最新推荐文章于 2025-06-11 11:04:33 发布

絵飛ヾ的魚

最新推荐文章于 2025-06-11 11:04:33 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript Javaquery HTML5 文章标签： html全选

本文链接：https://blog.youkuaiyun.com/qq_42408149/article/details/82780495

HTML5 同时被 3 个专栏收录

47 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

Javaquery

7 篇文章

订阅专栏

选择全选checkbox，然后下面的都选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格复选框全选</title>
    <script src="js/func.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            //选中或取消选中的功能的实现
            $("#checkall").change(function(){
                // 其他框列表，排除全选框
                var $otherCheckList=$("#myform input:checkbox:not('checkall')");
                //取得全选框当前的选中状态
                var checkAllState=$("#checkall").prop("checked");
                //其他的框状态=全选框的状态
                $otherCheckList.prop("checked",checkAllState);
            });
            //删除功能的实现
            $("#del").click(function(){
                var $otherCheckList=$("#myform input:checkbox:checked:not('#checkall')");
                //迭代所有的已选中的框
                $otherCheckList.each(function(){
                    // 取得某个选中框的values值，一般存放的是主键
                    alert($(this).val());
                });

            });

        })

    </script>
</head>
<body>
    <form id="myform">
        <input type="button" id="del" name="del" value="删除">
        <hr/>
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <!-- 全选框不要设置name，value为空 -->
            <td><input type="checkbox" id="checkall" value=""></td>
            <td>序号</td>
            <td>主键</td>
            <td>内容</td>
        </tr>
        <tr>
                <!-- 其他框不要设置name，value为主键 -->
                <td><input type="checkbox"  value="101"></td>
                <td>1</td>
                <td>101</td>
                <td>第一行</td>
            </tr>
            <tr>
                    <!-- 其他框不要设置name，value为主键 -->
                    <td><input type="checkbox"  value="102" ></td>
                    <td>2</td>
                    <td>102</td>
                    <td>第二行</td>
                </tr>
                <tr>
                        <!-- 其他框不要设置name，value为主键 -->
                        <td><input type="checkbox"  value="103"></td>
                        <td>3</td>
                        <td>103</td>
                        <td>第三行</td>
                    </tr>
                  

    </table>
    
</body>
</html>