Day17-选取器_单选+多选

暂时没有什麽小物件的想法
今天写一个简单的多选+一键取消的超简单选取器

首先先写HTML

<form>
    <div class="choose_box">
        <input type="radio" id="CheckAll" checked />
        <label for="CheckAll" class="choose"></label>
        <label for="CheckAll">全部</label>
    </div>
    <div class="choose_box">
        <input type="checkbox" class="items" id="northern" />
        <label for="northern" class="choose"></label>
        <label for="northern">北部</label>
    </div>
    <div class="choose_box">
        <input type="checkbox" class="items" id="central" />
        <label for="central" class="choose"></label>
        <label for="central">中部</label>
    </div>
    <div class="choose_box">
        <input type="checkbox" class="items" id="southern" />
        <label for="southern" class="choose"></label>
        <label for="southern">南部</label>
    </div>
    <div class="choose_box">
        <input type="checkbox" class="items" id="eastern" />
        <label for="eastern" class="choose"></label>
        <label for="eastern">东部</label>
    </div>
    <div class="choose_box">
        <input type="checkbox" class="items" id="islands" />
        <label for="islands" class="choose"></label>
        <label for="islands">离岛</label>
    </div>
</form>

分别有radio单选一个跟checkbox多选N个

为了美观，我将预设的选取样式隐藏，然後新增两个label与各自的input绑定
第一个label是为了做美丽的选择样式，第二个label是用来打字的
我这边选取样式是这样子写的

.choose {
    left: 0;
    width: 1.05vw;
    height: 1.05vw;
    border: 0.13vw solid var(--Dark);
    border-radius: 50%;
    box-sizing: border-box;
    margin-left: 0px;
}

.choose:before {
    position: absolute;
    content: "";
    left: 0.35vw;
    top: 0.45vw;
    opacity: 0;
    width: 0.4vw;
    height: 0.4vw;
    border-radius: 50%;
    background-color: var(--Dark);
    transition: all .3s;
}

input:checked+.choose:before {
    opacity: 1;
}

利用:before来做中间选到的样式，然後用input:checked+也就是input是否有选到来控制:before的显示与否
加上CSS後的选取样式长这样

然後进入JS
其实做法很简单，就是

点单选时把多选都给取消
若多选都没有选就把单选选起来

因为要去算是否有任何多选被选，所以所有多选我都设了一样的class，不设id是因为id是不能重复的，所以我们这边只能设在class

我这边设了一个check去看目前有没有checkbox被勾选，让check帮我抓所有被"checked"的items数量，然後取其长度，就能知道有没有checkbox被点击了

$("#CheckAll").click(function () {
    $(".items ").prop("checked", false)
});
$(".items").click(function () {
    $("#CheckAll").prop("checked", false)
    var check = $("input[class='items']:checked").length
    if (check == 0) {
        $("#CheckAll").prop("checked", true)
    }
});

完成後成品长这样