javascript按钮全选制作 -- 案例

效果图

html代码

<table border="1px" cellpadding="15" cellspacing="0">
    <thead>
    <tr>
        <td><input type="checkbox" id="j_cbAll"></td>
        <td>全选</td>
        <td>商品名</td>
    </tr>
    </thead>
    <tbody id="j_td">
    <tr>
        <td><input type="checkbox" value=""></td>
        <td></td>
        <td>牛奶</td>
    </tr>
    <tr>
        <td><input type="checkbox" value=""></td>
        <td></td>
        <td>面包</td>
    </tr>
    <tr>
        <td><input type="checkbox" value=""></td>
        <td></td>
        <td>火腿</td>
    </tr>
    </tbody>
</table>

css代码

无

js代码

<script>
    //checked="checked" 默认被选中状态
    var j_cbAll = document.getElementById('j_cbAll')
    var j_tds = document.getElementById('j_td').getElementsByTagName('input')
    j_cbAll.onclick = function () {
        for (var i = 0; i < j_tds.length; i++) {
            j_tds[i].checked = this.checked;
        }
    }
    //每次点击都去检查每个按钮是某被按下
    for (var i = 0; i < j_tds.length; i++) {
        j_tds[i].onclick = function () {
            var flag = true;
            for (var j = 0; j < j_tds.length; j++) {
                if (!j_tds[j].checked) {
                    flag = false
                }
            }
            j_cbAll.checked = flag
        }
    }
</script>