jquery实现表格动态复选框的代码分享
程序员文章站
2022-04-07 17:11:27
...
本篇文章给大家分享的内容是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实现表格动态复选框的代码分享的详细内容，更多请关注其它相关文章！