jquery实现表格动态复选框的代码分享

来源：懂视网责编：小采时间：2020-11-27 19:56:08

jquery实现表格动态复选框的代码分享

jquery实现表格动态复选框的代码分享:本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享，有着一定的参考价值，有需要的朋友可以参考一下效果如图 <!DOCTYPE html><html><head> <title></title> <meta http-equi

推荐度：

点击下载本文 文档为doc格式

导读jquery实现表格动态复选框的代码分享:本篇文章给大家分享的内容是jquery实现表格动态复选框的代码分享，有着一定的参考价值，有需要的朋友可以参考一下效果如图 <!DOCTYPE html><html><head> <title></title> <meta http-equi

本篇文章给大家分享的内容是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>

jquery实现表格动态复选框的代码分享

推荐度：

点击下载本文 文档为doc格式

标签：表格动态单元格

热门焦点

jquery实现表格动态复选框的代码分享

jquery实现表格动态复选框的代码分享

jquery实现表格动态复选框的代码分享

最新推荐

猜你喜欢

热门推荐