checkbox的单选、全选

首先;页面元素是这样子的

<input type="checkbox" id="all" οnclick="SelectAll(this)">全选</label>

<input type="checkbox" name="ids" value="${id}">单个

<input type="checkbox" name="ids" value="${id}">单个

<input type="checkbox" name="ids" value="${id}">单个

<input type="checkbox" name="ids" value="${id}">单个

<input type="checkbox" name="ids" value="${id}">单个

<input type="checkbox" name="ids" value="${id}">单个

然后是js部分：

function SelectAll(inputCheck) {//全选
    var inputs = $("input[name='ids']");
    var length = inputs.length;
    for(var i = 0; i < length; i++) {
        inputs[i].checked = inputCheck.checked;
    }
}

$(document).ready(function(){
    $("input[name='ids']").click(function(){//单选触发的动作：如果全部都选中或没有选中，全选框自动选中或取消选中
        var boxs = $("input[name='ids']");
        var e = true;
        for(var i = 0; i < boxs.length; i++){
            if(boxs[i].checked != this.checked ){
                e = false;
            }
        }
        if(e){//一致
            $("input[id='all']")[0].checked = this.checked;
        }else{//不一致
            $("input[id='all']")[0].checked = false;
        }
        
        
    });


});

效果：

1.点击 全选时全部都选上，取消时全部都取消

2.当下面单个的选项全部逐个选完后，全选框自动选中