jQuery获取选中的checkbox

先搞一堆复选框

 <table border="1">
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>全选<input type="checkbox" name="selectAll" id="selectAll" class="selectAll"></th>
        </tr>
        <tr>
            <td class="contentCheckbox">内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td>内容1</td>
            <td><input type="checkbox" name="" id="" class="content"></td>
        </tr>
        <tr>
            <td class="contentCheckbox">内容222</td>
            <td>内容2</td>
            <td>内容2</td>
            <td>内容2</td>
            <td>内容2</td>
            <td><input type="checkbox" name="" id="" class="content"></td>
        </tr>
        <tr>
            <td class="contentCheckbox">内容3</td>
            <td>内容333</td>
            <td>内容3</td>
            <td>内容3</td>
            <td>内容3</td>
            <td><input type="checkbox" name="" id="" class="content"></td>
        </tr>
        <tr>
            <td class="contentCheckbox">内容4</td>
            <td>内容444</td>
            <td>内容4</td>
            <td>内容4</td>
            <td>内容4</td>
            <td><input type="checkbox" name="" id="" class="content"></td>
        </tr>
    </table>
      <input type="button" value="获取选中框" class="getSelectValBtn">

效果图
下面是jQuery脚本

  <script >
       $().ready(function(){
            $("#selectAll").click(function(){//这是全选框的脚本,点击全选和全不选
                   var isFlag = $("#selectAll").is(":checked");//获取全选框状态
                   $(".content").attr("checked", isFlag);//将其他复选框设置为状态设置跟全选框一样
            });
             $(".getSelectValBtn").click(function(){
                var contentArr = $(".content");//获取除了全选框以外的复选框,这里我用的是类选择器,选中后返回的是一个数组
                var contentValueArr=[];//创建一个数组来装我们选中的值
                     
                for (let index = 0; index < contentArr.length; index++) {//遍历我们获取到的数组
                       if ($(contentArr[index]).is(":checked")) {//判断状态是否为选中,如果是选中状态,我们就获取我们在该区域想要的值,再push进数组
                       console.log( $(contentArr[index]).parent().parent().children().first().text());
                    var contentVal = $(contentArr[index]).parent().parent().children().first().text();
                         contentValueArr.push(contentVal);
                    }
                }
                if (contentValueArr.length==0) {
                    alert("请勾选要删除的记录");
                }
                if ( contentValueArr.length>0 &&confirm("您选中了"+contentValueArr.length+"条记录,确定删除吗?")  ) {  
                    console.log(contentValueArr.toString());
                   }
             });
            
        });
     </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值