HTML页面checkbox的全选反选全不选-基于jquery

最新推荐文章于 2024-05-08 17:11:32 发布

ChyoD1811

最新推荐文章于 2024-05-08 17:11:32 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML Jquery 文章标签： HTML Jquery

本文链接：https://blog.youkuaiyun.com/ChyoD1811/article/details/97883796

HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现全选与反选功能的方法，通过点击全选按钮可以控制一组复选框的状态，同时提供了反选功能，即反转所有复选框的选择状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="./jquery-3.3.1.min.js" ></script>
</head>
<body>
 <script>
        $(function() {
            $("#selectAll").click(function() {
                $(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
            });
        });
  
   $(function() {
            $("#selectRef").click(function() {
     $("#selectAll").prop("checked", false);
                 $(":checkbox[name='ids']").each(function ()
                {
                    $(this).prop("checked",!this["checked"]);
                });
            });
   
   
        });
    
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="80%" align="center">
            <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" />全选全不选<input type="button" id="selectRef" value="反选"/></th>
           </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="ids" /></td>
                   
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids" /></td>
                    
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids" /></td>
                   
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids" /></td>
                    
                </tr>
                <tr>
                    <td><input type="checkbox" name="ids" /></td>
                   
                </tr>
            </tbody>
        </table>
    </body>
</body>
</html>