jquery实现列表中Checkbox选中与反选，及获取选中的值

最新推荐文章于 2024-01-23 19:19:19 发布

suxuelian

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量1.5k

点赞数

分类专栏： asp.net 文章标签： js checkbox选中反选 jquery checkbox选中反选 asp.net checkbox选中与反选 js获取列表中选中的checkbox jquery获取列表中选中的checkbox

本文链接：https://blog.csdn.net/suxuelian/article/details/99960562

版权

asp.net 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

在日常开发中我们经常会遇到列表中使用Checkbox全选数据进行操作，特总结一下。

全选与反选我这里采用了两种方式，

第一种：通过class进行选择

html代码：

<table class="table-list"  width="100%">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="checkbox-input checkbox_all"></th>
                            <th>客户名称</th>
                            <th>客户等级</th>
                            <th>地区</th>
                            <th>联系电话</th>                            
                        </tr>

                    </thead>
                    <tbody>
                                <tr>
                                    <td><input type="checkbox" class="checkbox-input checkbox-data" name="1"></td>
                                    <td>伍尔特</td>
                                     <td>B</td>
                                    <td>北京</td>
                                    <td>157****4101</td>
                                </tr>
<tr>
                                    <td><input type="checkbox" class="checkbox-input checkbox-data" name="2"></td>
                                    <td>王老板</td>
                                     <td>B</td>
                                    <td>北京</td>
                                    <td>157****4101</td>
                                </tr>
<tr>
                                    <td><input type="checkbox" class="checkbox-input checkbox-data" name="3"></td>
                                    <td>张先生</td>
                                     <td>B</td>
                                    <td>上海</td>
                                   <td>157****4101</td>
                                </tr>
</tbody>
                               </table>

js代码：

  $('.checkbox_all').on('click', function () {
         if ($(this).prop("checked") == true) {
            // 上面的复选框已被选中
            $(".checkbox-data").prop("checked", true);
        } else {
            // 上面的复选框没被选中
            $(".checkbox-data").prop("checked", false);
        }
    });

第二种，通过name获取，通过name获取的话，需要保证可被选中的checkbox的name必须是一致的。

html代码：

<table  class="table-list" width="100%">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="checkbox-input checkbox_all"></th>
                            <th>客户名称</th>
                            <th>客户等级</th>
                            <th>地区</th>
                            <th>联系电话</th>                            
                        </tr>

                    </thead>
                    <tbody>
                                <tr>
                                    <td><input type="checkbox" class="checkbox-input" name="checkbox-data"></td>
                                    <td>伍尔特</td>
                                     <td>B</td>
                                    <td>北京</td>
                                    <td>157****4101</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox-input" name="checkbox-data"></td>
                                    <td>王老板</td>
                                     <td>B</td>
                                    <td>北京</td>
                                    <td>157****4101</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="checkbox-input" name="checkbox-data"></td>
                                    <td>张先生</td>
                                     <td>B</td>
                                    <td>上海</td>
                                   <td>157****4101</td>
                                </tr>
                            </tbody>
                               </table>

js代码：

  $('.checkbox_all').on('click', function () {
         if ($(this).prop("checked") == true) {
            // 上面的复选框已被选中
            $(":checkbox[name='checkbox-data']").prop("checked", true);
        } else {
            // 上面的复选框没被选中
            $(":checkbox[name='checkbox-data']").prop("checked", false);
        }
    });

以上是我整理的两种checkbox全选与反选的代码。

以下是获取列表中选中的值，我采用的是以上的第一种通过class进行选中与反选，name存放单条数据的Id

  $('.table-list').find(':checkbox').each(function () {
            if ($(this).is(":checked")) {
                var id = $(this).attr('name');
                alert(id);
            }
        });

简单的梳理了一下，可能不是最好的也不是最优的，仅供参考学习。如果有更好的写法欢迎留言讨论。