Home >Web Front-end >JS Tutorial >Code sharing for implementing dynamic checkboxes in tables using jquery
The content of this article is to share the code of jquery to realize the dynamic check box of the table. It has a certain reference value. Friends in need can refer to it
The effect is as follows Picture
<!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>
Related recommendations:
js dynamically add checkbox & dynamic hook Select the corresponding value
jQuery operation checkbox checkbox skills summary
The above is the detailed content of Code sharing for implementing dynamic checkboxes in tables using jquery. For more information, please follow other related articles on the PHP Chinese website!