checkbox全选，取消全选

2019独角兽企业重金招聘Python工程师标准>>>

HTML代码如下，class是Bootstrap里面的样式（input里面的style="margin-top: 3px;"是为了解决checkbox和后面的文字无法对齐。）

<div id="checkboxs">
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="1"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">全选</label>
    <button class="btn btn-default" value="0" οnclick="checkClick(this.value)">1</button>
    <br/>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox2" value="2"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">2</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox3" value="3"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">3</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox4" value="4"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">4</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox5" value="5"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">5</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox6" value="6"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">6</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox7" value="7"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">7</label>
    <label class="checkbox-inline">
        <input name="test" type="checkbox" id="inlineCheckbox8" value="8"
               style="margin-top: 3px;" οnclick="checkClick(this.value)">8</label>
</div>

JS代码如下（注释很详细）

function checkClick(value) {
    var checkbox = document.getElementById('checkboxs');//获取div
    var checked = checkbox.getElementsByTagName('input');//获取div下的input
    if (value == 1)
    //如果(value == 1),则选中了全选checkbox,通过遍历将所有checkbox选中
        for (i = 0; i < checked.length; i++)
            checked[i].checked = true;
    else if (value == 0)
    //如果(value == 0),则点击了了取消去选按钮,通过遍历将所有checkbox取消选中
        for (i = 0; i < checked.length; i++)
            checked[i].checked = false;
    $(document).ready(function () {
        //如果name为test的input的选中个数大于等于7
        if ($("input[name='test']:checked").length >= 7)
            document.getElementById('inlineCheckbox1').checked = true;
        //如果name为test的input的选中个数大于等于7
        else if ($("input[name='test']:checked").length < 7)
            document.getElementById('inlineCheckbox1').checked = false;
    });
};

转载于:https://my.oschina.net/aijiaoer0624/blog/1541236