<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" data-id="1">
<span>账上</span>
</div>
<div>
<input type="checkbox" data-id="2">
<span>账上1</span>
</div>
<div>
<input type="checkbox" data-id="3">
<span>账上2</span>
</div>
<div class="">
<input type="checkbox" data-id="4">
<span>账上3</span>
</div>
<div class="mihao">
</div>
</body>
<script src="../js/jquery-1.11.1.js"></script>
<script>
var str='';
for(let i=0;i<$('input').length;i++){
$('input').eq(i).click(function(){
if($(this).prop("checked")==true){
var nane=$(this).siblings('span').html();
str=`<b data-id="${$(this).attr('data-id')}">${$(this).siblings('span').html()}</b>`
$('.mihao').append(str);
}else {
var id=$(this).attr('data-id');
for(let j=0;j<$('.mihao b').length;j++){ //便利所有的b标签
if(id==$('.mihao b').eq(j).attr('data-id')){ //判断两个id是否相同，如果相同删除
console.log($('.mihao b').eq(j).html());
$('.mihao b').eq(j).remove()
}
}
}
})
}
</script>
</html>checkbox选中添加与不选中删除的操作
猜你喜欢
转载自blog.csdn.net/qq_41994549/article/details/83444371
今日推荐
周排行