使用JQuery实现全选的功能

最新推荐文章于 2025-05-05 22:17:58 发布

Tech_monkey

最新推荐文章于 2025-05-05 22:17:58 发布

阅读量2.5k

点赞数

分类专栏：学习笔记 JQuery 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/Tech_monkey/article/details/46399873

版权

学习笔记同时被 2 个专栏收录

3 篇文章

订阅专栏

JQuery

2 篇文章

订阅专栏

本文介绍了如何使用JQuery实现全选功能，包括当点击全选复选框时设置所有复选框为已选中状态，以及在部分选择后再次点击全选时处理剩余复选框的方法。提供相关jq语句作为学习参考。

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

全选功能代码的原理：

1、当点击全选的复选框的时候就将指定的复选框全部打上勾（就是将状态变成checked）

2、选了一部分的复选框后再点击全选复选框，先获取当前复选框的数量，然后将剩下的复选框打勾

<table>   
 <tr>
        <td><input type="checkbox" id="checkall"/></td>/*全选框的id*/
        <td>标题</td>
        <td>标题</td>
   </tr>
   <tr>
        <td><input type="checkbox" name="1"/></td>
        <td>内容</td>
        <td>内容</td>
   </tr>
<tr>
        <td><input type="checkbox" name="2"/></td>
        <td>内容</td>
        <td>内容</td>
   </tr>
</table>

jq语句

<script>

    $(document).ready(function() {
        $('#checkall').click(function () { /*checkall是全选复选框的id名称*/
            $('input:checkbox[name]').prop('checked', this.checked); /*设置复选框的动态属性*/

        });

        $('input:checkbox[name]').click(function () {
            isall = $('input:checkbox[name]').length == $('input:checkbox[name]:checked').length;/*获取当前选中的个数，判断是否跟全部复选框的个数是否相等*/
            $('#checkall').prop('checked', isall);

        });


    });

</script>

注：记得引用jq文件！

学习笔记，仅供参考..