CSS3+JS實現的個性化全選反選

監控所有列表項下的checkbox是否都處在選中的狀態，如果全選中則全選按鈕處在選中狀態；當存在checkbox未選中時，取消全選按鈕的選中狀態。

  <!-- JS -->

window.onload = function(){
    selectAll();
    doCheckbox();
}
function Id(id){
    return document.getElementById(id);
}
//全選反選操作
function selectAll(){
    var checklist = document.getElementsByName("inputCheck");
    var Checkall = Id("Checkall");
    if(Checkall.checked)
    {
        Checkall.parentNode.classList.add("act_checkbox");
        for(var i=0;i<checklist.length;i++)
        {
            checklist[i].checked = 1;
            checklist[i].parentNode.classList.add("act_checkbox");
        }
    }else{
        Checkall.parentNode.classList.remove("act_checkbox");
        for(var j=0;j<checklist.length;j++)
        {
            checklist[j].checked = 0;
            checklist[j].parentNode.classList.remove("act_checkbox");
        }
    }
}
//部分選中狀態下的操作
function noselectall(){
    var count=0;
    var Checkall = Id("Checkall");
    var checklist = document.getElementsByName ("inputCheck");
    for(var i=0;i<checklist.length;i++){
        if(checklist[i].checked == true){
            //選中的操作
            count++;
            checklist[i].parentNode.classList.add("act_checkbox");
        }
    }
    if(count==checklist.length){ //所有元素都被選中時，打上全選狀態
        Checkall.checked = true;
        Checkall.parentNode.classList.add("act_checkbox");
    }
}

//單個元素選中與未選中狀態的處理
function doCheckbox(){
    var oUl = Id("checkUl");
    var Checkall = Id("Checkall");
    //將監聽操作事件遷移到父親元素上，採用事件委託的形式處理input點擊操作
    oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'input'){
            if(target.checked==false){ //存在元素未被選中時，取消全選狀態
                Checkall.checked = false;
                Checkall.parentNode.classList.remove("act_checkbox");
                target.parentNode.classList.remove("act_checkbox");
            }else{
                noselectall();
            }
        }
    }
}
function submitCheck(){
    var arrCheck = [];
    var checklist = document.getElementsByName("inputCheck");
    for(var i=0;i<checklist.length;i++){
        if(checklist[i].checked == true){
            //選中的操作
            arrCheck.push(checklist[i].value);
        }
    }
    console.log("arrCheck="+arrCheck);
    return arrCheck;
}window.onload = function(){
    selectAll();
    doCheckbox();
}
function Id(id){
    return document.getElementById(id);
}
//全選反選操作
function selectAll(){
    var checklist = document.getElementsByName("inputCheck");
    var Checkall = Id("Checkall");
    if(Checkall.checked)
    {
        Checkall.parentNode.classList.add("act_checkbox");
        for(var i=0;i<checklist.length;i++)
        {
            checklist[i].checked = 1;
            checklist[i].parentNode.classList.add("act_checkbox");
        }
    }else{
        Checkall.parentNode.classList.remove("act_checkbox");
        for(var j=0;j<checklist.length;j++)
        {
            checklist[j].checked = 0;
            checklist[j].parentNode.classList.remove("act_checkbox");
        }
    }
}
//部分選中狀態下的操作
function noselectall(){
    var count=0;
    var Checkall = Id("Checkall");
    var checklist = document.getElementsByName ("inputCheck");
    for(var i=0;i<checklist.length;i++){
        if(checklist[i].checked == true){
            //選中的操作
            count++;
            checklist[i].parentNode.classList.add("act_checkbox");
        }
    }
    if(count==checklist.length){ //所有元素都被選中時，打上全選狀態
        Checkall.checked = true;
        Checkall.parentNode.classList.add("act_checkbox");
    }
}

//單個元素選中與未選中狀態的處理
function doCheckbox(){
    var oUl = Id("checkUl");
    var Checkall = Id("Checkall");
    //將監聽操作事件遷移到父親元素上，採用事件委託的形式處理input點擊操作
    oUl.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.nodeName.toLowerCase() == 'input'){
            if(target.checked==false){ //存在元素未被選中時，取消全選狀態
                Checkall.checked = false;
                Checkall.parentNode.classList.remove("act_checkbox");
                target.parentNode.classList.remove("act_checkbox");
            }else{
                noselectall();
            }
        }
    }
}
function submitCheck(){
    var arrCheck = [];
    var checklist = document.getElementsByName("inputCheck");
    for(var i=0;i<checklist.length;i++){
        if(checklist[i].checked == true){
            //選中的操作
            arrCheck.push(checklist[i].value);
        }
    }
    console.log("arrCheck="+arrCheck);
    return arrCheck;
}

<!- HTML -->

<div class="box">
    <div class="cont">
        <div class="all_checkbox">
            <div class="checkbox act_checkbox">
                <input type="checkbox" id="Checkall" name="inputCheckall" checked onclick="selectAll()">
                <p><i></i><span>全選</span></p>
            </div>
        </div>
        <ul id="checkUl">
            <li>
                <div class="checkbox act_checkbox">
                    <input type="checkbox" name="inputCheck" value="1">
                    <p><i></i><span>選項一</span></p>
                </div>
            </li>
            <li>
                <div class="checkbox">
                    <input type="checkbox" name="inputCheck" value="2">
                    <p><i></i><span>選項二</span></p>
                </div>
            </li>
            <li>
                <div class="checkbox">
                    <input type="checkbox" name="inputCheck" value="3">
                    <p><i></i><span>選項三</span></p>
                </div>
            </li>
            <li>
                <div class="checkbox">
                    <input type="checkbox" name="inputCheck" value="4">
                    <p><i></i><span>選項四</span></p>
                </div>
            </li>
        </ul>
        <p class="but_check"><button onclick="submitCheck()">提交</button></p>
    </div>
</div>

<!-- CSS -->

.checkbox{
    position: relative;
}
.checkbox>input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    cursor: pointer;
    height: 100%;
    opacity: 0;
}
.checkbox i{
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -1px;
    position: relative;
}
.act_checkbox i{
    border-color: green;
}
.act_checkbox  i:after{
    content: '';
    position: absolute;
    top: 3px;
    left: 2px;
    width: 10px;
    height: 5px;
    border-left:3px solid green;
    border-bottom:3px solid green;
    transform: rotate(-45deg);
}
.all_checkbox{
    width: 100px;
    padding:20px;
    box-sizing: border-box;
}
.but_check{
    width: 100%;
    padding: 20px 0;
    text-align: center;
}
.but_check>button{
    padding: 5px 20px;
    background: dodgerblue;
    color: #fff;
    text-align: center;
    cursor: pointer;
    border: 0;
    outline:none;
    border-radius: 5px;
}

<!-- 效果 -->