[分享]css全选选择框里全部打勾

在网页开发中，经常需要使用全选选择框。但是，在需要默认勾选全部选项时，该怎么做呢？下面我们介绍使用CSS实现全选选择框里全部打勾的方法。 全选 selectAll:checked ~ ul li i...

在网页开发中，经常需要使用全选选择框。但是，在需要默认勾选全部选项时，该怎么做呢？下面我们介绍使用CSS实现全选选择框里全部打勾的方法。

 <input type="checkbox" name="selectAll" id="selectAll">
    <label for="selectAll">全选</label>
    
    <style>
        #selectAll:checked ~ ul li input[type="checkbox"] {
            /* 选中和未选中状态下的背景图片 */
            background-image: url("checked.png"), url("unchecked.png");
            /* 两张背景图片的位置 */
            background-position: 0 0, 0 -20px;
            /* 两张背景图片的大小 */
            background-size: 20px 20px;
            /* 两张背景图片的重复方式 */
            background-repeat: no-repeat;
        }
    </style>
    
    <ul>
        <li>
            <input type="checkbox" name="item1" id="item1">
            <label for="item1">选项1</label>
        </li>
        <li>
            <input type="checkbox" name="item2" id="item2">
            <label for="item2">选项2</label>
        </li>
        <li>
            <input type="checkbox" name="item3" id="item3">
            <label for="item3">选项3</label>
        </li>
    </ul> 

代码中，我们首先创建了一个全选选择框，然后使用ID选择器和伪类选择器:checked实现了全选选择框选中时，所有选项都被勾选的效果。

同时，我们使用了background-image属性和两张背景图片分别代表选中和未选中状态下的勾选框。通过改变两张背景图片的位置、大小和重复方式，我们也实现了使勾选框居中对齐的效果。

通过这样的方式，我们可以很方便地实现让全选选择框里的所有选项默认全部勾选的效果。