<style>
div {
width: 500px;
line-height: 30px;
font-size: 18px;
margin: 20px auto;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
button {
float: right;
}
table {
margin: 10px auto;
/* 相邻边框合并 */
border-collapse: collapse;
text-align: center;
}
</style>
<div class="box">
姓名:
<input type="text"><br>
性别:
<input type="radio" name="sex" id="" value="男" checked>男
<input type="radio" name="sex" id="" value="女" checked>女<br>
年龄:
<input type="text"><br>
<button>add</button>
</div>
<table border="1" width="500">
<thead>
<th>
<input type="checkbox" name="" id="choose">全选
</th>
<th>name</th>
<th>sex</th>
<th>age</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>张三</td>
<td>men</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>李四</td>
<td>men</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>women</td>
<td>20</td>
</tr>
</tbody>
<br>
<button>remove</button>
</table>
<script>
//添加按钮的事件
var $btn =$('button')
$btn.eq(0).click(function(){
var res =$('<tr>\
<td>\
<input type="checkbox" name="" id=""></td>\
<td>\
'+$(':text').eq(0).val()+'</td>\
<td>\
'+$(':radio:checked').val()+'</td>\
<td>\
'+$(':text').eq(1).val()+'</td>\
</tr>')
console.log(res);
$('tbody').append(res);
// console.log(1);
});
//删除按钮的事件
$btn.eq(1).click(function(){
$('tbody :checkbox:checked').parents('tr').remove();
})
//是否全选事件
$('tbody').on('click',':checkbox',function(){
if($('tbody :checkbox:checked').length==$('tbody :checkbox').length){
// console.log($('thead :checkbox')[0].checked);
$('thead :checkbox').prop('checked',true)
}else{
$('thead :checkbox').prop('checked',false)
}
})
//全选选框事件
$('thead :checkbox').click(function(){
if($('#choose').is(':checked')){
$('tbody :checkbox').prop('checked',true);
}else{
$('tbody :checkbox').prop('checked',false)
}
})
// 知识点:
// $(':checkbox'),选中所有的复选框
// $(':text'),选中所有的单行文本输入框
//$(':radio'),选中所有的单选框
//$(':radio:checked'),选中被选中的单选框
//$(':checkbox:checked'),选中被选中的复选框
// $('#choose').is(':checked'),获取选框的状态,返回布尔值
</script>