Html css jq 组合制作全选与全不选

一、需要制作效果;

要求:点击选择,选择1 选择2全部选中,只点击选择1或选择2 全选不选中,选择1,选择2同时选中时,全选选中;

添加删除一行标签;

编辑里面内容(以张三、李四为例)

二、Html部分:

<!DOCTYPE html>

<head>

</head>

</div>

</div>

</div>

</body>

</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中, 效果都一样欢迎各位大神指点,评论;

Html css jq 组合制作全选与全不选

相关推荐