app 收藏管理（复选框）

最新推荐文章于 2024-05-16 03:01:14 发布

码农挚友

最新推荐文章于 2024-05-16 03:01:14 发布

阅读量230

点赞数

文章标签： checkbox web app

本文链接：https://blog.csdn.net/weixin_42012939/article/details/108621107

版权

https://blog.csdn.net/coco1118/article/details/93861642
HTML：

管理

完成

显示复选框

全选：

       <block  >
    <div class="left-price">
       <label for="all"  class="labelAll">
              <input type="checkbox" id="all" />
            
        <div  class="all-selected1">全选</div>
        </label>   
    </div>
       </block>
    <div class="to-pay-btn" >删除所选</div>
   
</div>

css:

 <style type="text/css">
  #guanli1{
     display: none;
}

.images_1 input[type=checkbox] {
margin-right: 3%;
cursor: pointer;
font-size: 14px;
width: 15px;
height: 5px;
position: relative;
top: -10px;
border-radius: 50px;
}

.images_1 input[type=checkbox]:after {
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #5d5d5d;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 3px;
border-radius: 50px;
content: “”;
font-size: 12px;
background-color: #fff;
line-height: 16px;
}

.images_1 input[type=checkbox]:checked:after {
content: “✔”;
font-size: 12px;
position: absolute;
width: 15px;
height: 15px;
background-color:#5d5d5d ;
color: #fff;
display: inline-block;
visibility: visible;
padding: 0px 2px;
border-radius: 50px;
font-family: Arial;
transform: rotate(16deg);
line-height: 16px;
}

js: