一、需要制作效果;
要求:点击选择,选择1 选择2全部选中,只点击选择1或选择2 全选不选中,选择1,选择2同时选中时,全选选中;
添加 删除一行标签;
编辑里面内容(以张三、李四为例)
二、Html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/com.css">
//引入css
<title>练习课</title>
</head>
<h1>全选</h1>
<div class="tab">
<div class="trs">
<div class="tds"><input type="checkbox" id="qx">全选</div>
<div class="tds">姓名</div>
<div class="tds">操作</div>
</div>
<div class="trs">
<div class="tds"><input type="checkbox" class="xz">选择1</div>
<div class="tds a1">张三</div>
<div class="tds"><button class="del">删除</div>
</div>
<div class="trs">
<div class="tds"><input type="checkbox" class="xz">选择2</div>
<div class="tds a1">李四</div>
<div class="tds"><button class="del">删除</div>
</div>
</div>
<button id="add">添加</button>
</body>
<script src="js/jquery-3.4.1.js"></script> //引入js库
<script src="js/comm.js"></script> //引入自己写的js
</html>
三、css 部分
.trs:after{
display: block;
content: ' ';
clear: both;
}
.tds{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
text-align: center;
}
.a1 input{
width: 100%;
height: 25px;
line-height: 25px;
}
#add{
width: 55px;
height: 25px;
}
四、js部分
$("#qx").click(function(){
var iso=$(this).is(":checked") //点击之后状态
if(iso){
$(".xz").prop("checked",true)
}else{
$(".xz").prop("checked",false)
}
})
$("body").on("click",".xz",function(){
//记录被选中个数
var ij=$(".xz").length
var count=0
for(i=0;i<ij;i++){
if($(".xz").eq(i).is(":checked")){//判断下面的是否全部选中 需借助上面的变量count
count++;
};
}
//下面判断是否被选中;
if(count == ij){
$("#qx").prop("checked",true);
}else{
$("#qx").prop("checked",false);
}
})
// 添加一行
$("#add").click(function(){
$(".tab").append('<div class="trs"><div class="tds"><input type="checkbox" class="xz">选择</div><div class="tds">张三</div><div class="tds"><button class="del">删除</div>') //不要有空格
});
//删除一行
$("body").on("click",".del",function(){
$(this).parents(".trs").remove();
});
//编辑(以张三、李四为例)
$('body').on('click','.a1',function(){
var text = $(this).text();
$(this).html('<input type="text" value='+text+'>');
$(this).children().focus();
});
$('body').on('click','.a1 input',function(){
return false;
});
$('body').on('blur','.a1 input',function(){
var val = $(this).val();
$(this).parent().text(val);
});
一部分人喜欢把 css文件写到Html中, 效果都一样 欢迎各位大神指点,评论;