inputcheckbox：一個全能的多選框

一、基本用法

inputcheckbox是HTML5提供的一個多選框元素，可以通過設置type屬性為checkbox來創建。

<input type="checkbox" name="fruit" value="apple"> 蘋果

<input type="checkbox" name="fruit" value="banana"> 香蕉

<input type="checkbox" name="fruit" value="orange"> 橙子

上述代碼中，name屬性設置了多個多選框的分組屬性，value屬性設置了每個多選框對應的值。

當需要默認選中某些多選框時，可以通過在checked屬性設置為true來實現：

<input type="checkbox" name="fruit" value="apple" checked> 蘋果

<input type="checkbox" name="fruit" value="banana"> 香蕉

<input type="checkbox" name="fruit" value="orange" checked> 橙子

二、全選與取消全選

經常情況下，我們需要在一組多選框中設置全選和取消全選的功能。這可以通過兩個操作分別來實現：

<input type="checkbox" id="check-all"> 全選

<input type="checkbox" name="fruit" value="apple" class="check-one"> 蘋果

<input type="checkbox" name="fruit" value="banana" class="check-one"> 香蕉

<input type="checkbox" name="fruit" value="orange" class="check-one"> 橙子

$(function(){
    $("#check-all").click(function(){
        $(".check-one").prop("checked", $(this).prop("checked"));
    });
    $(".check-one").click(function(){
        if($(this).prop("checked") == false){
            $("#check-all").prop("checked", false);
        }
        else if($(".check-one:checked").length == $(".check-one").length){
            $("#check-all").prop("checked", true);
        }
    });
});

通過上述JavaScript代碼，當用戶點擊全選的多選框時，通過遍歷頁面中class為check-one的所有多選框，來設置它們的checked屬性。當其中任意一個多選框被取消選中時，取消全選的多選框也相應的取消選中；當全部多選框被選中時，則選擇全選的多選框也相應的選中。

三、多選框的樣式及功能拓展

在實際應用中，經常需要將多選框的樣式進行美化，或者為其添加更加豐富的功能。

1. 美化多選框的樣式

通過CSS樣式來美化多選框的外觀。

.checkbox {
    position: relative;
    display: inline-block;
    padding-left: 25px;
    margin-right: 10px;
    font-size: 14px;
    cursor: pointer;
}
.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}
.checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
    border-color: #2196F3;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox input:checked ~ .checkmark:after {
    display: block;
}
.checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

上述樣式設置了多選框的容器樣式以及多選框的樣式，當滑鼠移動到多選框上時，其樣式會發生變化。當多選框選中時，其樣式也會發生變化。

蘋果
    <input type="checkbox" name="fruit" value="apple">
    

香蕉
    <input type="checkbox" name="fruit" value="banana">
    

橙子
    <input type="checkbox" name="fruit" value="orange">
    

2. 選擇框級聯效果

選擇框級聯效果，即在第一個多選框選定後對之後的多選框進行篩選，換言之，第二個多選框將根據第一個多選框中選中的值來顯示與隱藏。

選擇類別1：
A
    <input type="checkbox" name="type1" value="A">
    

B
    <input type="checkbox" name="type1" value="B">
    

選擇類別2：
A-1
    <input type="checkbox" name="type2" value="A-1">
    

A-2
    <input type="checkbox" name="type2" value="A-2">
    

B-1
    <input type="checkbox" name="type2" value="B-1">
    

B-2
    <input type="checkbox" name="type2" value="B-2">
    

$(function(){
    $("[name='type1']").click(function(){
        var type1 = $(this).val();
        $(".type2").addClass("hide");
        $(".type2-" + type1).removeClass("hide");
    });
});

當用戶點擊選擇類別1中的某個多選框時，通過遍歷class為type2的所有多選框，來設置其display屬性的不同值來實現級聯效果。