Jquery实现全选全不选最简单的方式以及获取选中的值

最新推荐文章于 2020-11-19 20:11:47 发布

飞奔的波大爷

最新推荐文章于 2020-11-19 20:11:47 发布

阅读量857

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/qq_22860341/article/details/81531029

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现全选与取消全选功能的方法，并解释了使用prop属性而不是attr属性的原因，以确保全选功能可以重复使用。

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

          $(function() {  
            $('#checkall').on('click',function(){
                if(this.checked) {
                    $("input[name='childcheck']").prop('checked',true);
                }else {
                    $("input[name='childcheck']").prop('checked',false);
                }
            });
         });

注意：若使用attr代替prop，全选效果只能实现一次。

<table>
                <tr>
                    <td><input type="checkbox" name="" id="checkall" value="" /></td>
                    <td>序号</td>
                    <td>用户名称</td>
                </tr>
                <tr th:each="a,aStat:${adminlist}">
                    <td><input type="checkbox" name="childcheck" id="${a.id}" value="${a.id}" /></td>
                    <td th:text="${aStat.count}">1</td>
                    <td th:text="${a.adminname}">超级管理员</td>
                </tr>
            </table>

取值：

           var pList = "";
            $("[name='childcheck']").each(function () {
                if ($(this).is(':checked')) {
                    pList += $(this).val() + ",";
                }
            });
            //去除最后的，
           pList=pList.substr(0,pList.length-1);