暫時沒有什麼小物件的想法
今天寫一個簡單的多選+一鍵取消的超簡單選取器

首先先寫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)
    }
});

完成後成品長這樣

這個選取器可以搭配一些搜尋鍵或是篩選器一起使用
在寫一些跟後台連結抓資料的網站時可以用得上噢噢噢