本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享,有着一定的参考价值,有需要的朋友可以参考一下

效果如图

这里写图片描述

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入bootstrap --> <link rel="stylesheet" href="css/bootstrap.min.css" /> <!-- 引入JQuery bootstrap.js--> <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script></head><body> <p class="container"> <p class="col-md-7"> <button id='addTypeBtn' class="btn btn-default btn-danger">添加</button> <button class="btn btn-default">保存</button> <table class="table"> <thead> <tr> <th><input id='checkAll' type="checkbox"/></th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td><input type="text" placeholder="请输入姓名" value="张三"/></td> <td><input type="number" style="width: 40px" value="1"/></td> </tr> <tr> <td><input type="text" placeholder="请输入姓名" value="张三"/></td> <td><input type="number" style="width: 40px" value="1"/></td> </tr> <tr> <td><input type="text" placeholder="请输入姓名" value="张三"/></td> <td><input type="number" style="width: 40px" value="1"/></td> </tr> </tbody> </table> </p> </p></body><script> $(function(){ //初始化 function initTable() { var checkAll = $('#checkAll'); var trs = $('tbody tr'); var tag = $('<td><input name="checkitem" type="checkbox"/></td>'); trs.prepend(tag); //得到tbody中的所有选框. var checks = $('input[name="checkitem"]'); //给全选框添加事件 checkAll.on('click',function(event){ if($(this).prop('checked') == false){ //全部取消 $('input[type="checkbox"]').prop('checked',false); }else{ $('input[type="checkbox"]').prop('checked',true); } }); //给每个单独的选择框加事件 $('tbody').on('click',function(event){ checks = $('input[name="checkitem"]'); if (event.target.name == 'checkitem'){ if($(this).prop('checked') == false){ $(this).prop('checked',false); }else{ $(this).prop('checked',true); } //判断是否选满了 if(checks.length == $('tbody').find('input:checked').length){ checkAll.prop('checked',true); }else{ checkAll.prop('checked',false); } } }); } initTable(); //新增点击事件 $('#addTypeBtn').on('click', function () { var html = ''; html += '<tr class="active">'; html += '<td><input name="checkitem" type="checkbox"/></td>' html += '<td><input type="text" placeholder="请输入姓名" value="张三"/></td>'; html += '<td><input type="number" style="width: 40px" value="1"/></td>'; html += '<td>'; html += '</tr>'; var html = $(html) $('tbody').append(html); //取消全选 $('#checkAll').prop('checked',false); }); });</script></html>

相关推荐:

js动态添加复选框&动态勾选对应的值

jQuery操作复选框checkbox技巧总结

以上就是jquery实现表格动态复选框的代码分享的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码