jquery 获取checkbox复选框单个或一组的value值

假设现有一页面有一组 checkbox 的 name 的值为 check ,那么获取这组 name=check 的checkbox的值的方法如下:

Js代码   收藏代码
  1. var checkValue=new Array(); 
  2. //或者 var checkValue=[];
  3. $('input[name="check "]:checked').each(function(){  
  4.     checkValue.push($(this).val());//向数组中添加元素  
  5. });  
  6. var checkstr=checkValue.join(',');//将数组元素连接起来以构建一个字符串  
  7. alert(checkstr);  

 

 

判断单个 checkbox 是否选中以及获取选中值的方法如下:

Js代码   收藏代码
  1. if($("#id").is(":checked")){//选中  
  2.     alert($("#id").val());//打印选中的值  
  3. }  

 

以下是一个基于jQuery实现的动态增删改查表格,其中每条数据带有复选框: HTML代码: ```html <table id="myTable"> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkItem"></td> <td>张三</td> <td>20</td> <td> <button class="editBtn">编辑</button> <button class="deleteBtn">删除</button> </td> </tr> </tbody> </table> <button id="addBtn">新增</button> ``` jQuery代码: ```javascript // 全选/取消全选 $("#checkAll").click(function() { $(".checkItem").prop("checked", this.checked); }); // 单个复选框状态改变时改变全选复选框状态 $(".checkItem").change(function() { if ($(this).prop("checked") === false) { $("#checkAll").prop("checked", false); } else if ($(".checkItem:checked").length === $(".checkItem").length) { $("#checkAll").prop("checked", true); } }); // 点击新增按钮 $("#addBtn").click(function() { var newRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td><input type='text' class='nameInput'></td>" + "<td><input type='text' class='ageInput'></td>" + "<td><button class='saveBtn'>保存</button>" + "<button class='cancelBtn'>取消</button></td>" + "</tr>"; $("#myTable tbody").append(newRow); }); // 点击保存按钮 $("#myTable").on("click", ".saveBtn", function() { var name = $(this).parents("tr").find(".nameInput").val(); var age = $(this).parents("tr").find(".ageInput").val(); var newRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td>" + name + "</td>" + "<td>" + age + "</td>" + "<td><button class='editBtn'>编辑</button>" + "<button class='deleteBtn'>删除</button></td>" + "</tr>"; $(this).parents("tr").replaceWith(newRow); }); // 点击取消按钮 $("#myTable").on("click", ".cancelBtn", function() { $(this).parents("tr").remove(); }); // 点击编辑按钮 $("#myTable").on("click", ".editBtn", function() { var name = $(this).parents("tr").find("td:eq(1)").text(); var age = $(this).parents("tr").find("td:eq(2)").text(); var editRow = "<tr>" + "<td><input type='checkbox' class='checkItem'></td>" + "<td><input type='text' class='nameInput' value='" + name + "'></td>" + "<td><input type='text' class='ageInput' value='" + age + "'></td>" + "<td><button class='saveBtn'>保存</button>" + "<button class='cancelBtn'>取消</button></td>" + "</tr>"; $(this).parents("tr").replaceWith(editRow); }); // 点击删除按钮 $("#myTable").on("click", ".deleteBtn", function() { $(this).parents("tr").remove(); }); ``` 以上代码实现了动态增删改查表格,并且每条数据带有复选框。其中,全选/取消全选、单个复选框状态改变时改变全选复选框状态通过jQuery实现;新增、保存、取消、编辑、删除等操作通过绑定jQuery事件实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值