<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
姓名:<input type="text" id="np"> 年龄:<input type="number" id="pu"> 性别:<input type="text" id="ut" > <input type="button" value="添加" id="in" >
<table>
<tr>
<th><input type='checkbox' id="ip">全选</th>
<th> 姓名</th>
<th> 年龄</th>
<th> 性别</th>
<th> 操作</th>
</tr>
</table>
<script>
var n=0;
$("#in").click(function () {
//获取输入的姓名
var xm= $("#np").val();
var nl= $("#pu").val();
var xb= $("#ut").val();
// alert( $("#np").val())
//创建节点
$("table").append("<tr>"+"<td>"+"<input type='checkbox'>"+"</td>"+"<td>"+xm+"</td>"+"<td>"+nl+"</td>"+"<td>"+xb+"</td>"+"<td>"+"<span>删除</span>"+"</td>"+"</tr>");
$("table tr td span").click(function () {
//判断当前这个复选框被勾选了才能被删除
if($(this).parents("tr").find("input").prop("checked")==true){
4
$(this).parents("tr").remove();
}
});
});
//给"全选"一个点击事件,如果全选就把添加的input都设为true
$("#ip").click(function () {
if($("#ip").prop("checked")==true){
$("tr td input").prop("checked",true);
}else{
$("tr td input").prop("checked",false);
}
});
//把添加的input设置点击事件,在进行判断是否被勾选,计数器勾选一个就累计一个,然后判断input的长度和计数器是否相等,相等的话就把“全选的input勾选”
$("table").on("click","input",function () {
alert(0);
if($(this).prop("checked")==true){
n++;
}else{
n--;
}
if(n==$("tr td input").length){
$("#ip").prop("checked",true);
}else{
$("#ip").prop("checked",false);
}
});
</script>
</body>
</html>
表单的勾选删除
最新推荐文章于 2021-07-27 22:10:36 发布