一、需要制作效果;
要求:点击选择,选择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中, 效果都一样 欢迎各位大神指点,评论;