checkbox全选，js实现-CSDN博客

本文链接：https://blog.csdn.net/zlh13854157321/article/details/52168650

// 全选/全不选
    function checkAll() {
// 用jquery获取name为checkboxs的多选按钮
        var checkBoxs = $("[name='checkboxs']");
// 判断id为checkbox的按钮是否被选中（假设此按钮为全选）
        if ($('#checkbox').get(0).checked == true) {
// 将jquery获取的多选按钮全部选中
            for (var i = 0; i < checkBoxs.length; i++) {
                if (checkBoxs[i].type == "checkbox") {
                    checkBoxs[i].checked = true;
                }
            }
        } else {
// 将jquery获取的多选按钮全部为反选中
            for (var i = 0; i < checkBoxs.length; i++) {
                if (checkBoxs[i].type == "checkbox") {
                    checkBoxs[i].checked = false;
                }
            }
        }
    }

html代码如下：

<div id="article-city">
<label><input type="checkbox" name="checkboxs" value="330100"> 杭州市</label>
<label><input type="checkbox" name="checkboxs" value="330200"> 宁波市</label>
<label><input type="checkbox" name="checkboxs" value="330300"> 温州市</label>
<label><input type="checkbox" name="checkboxs" value="330400"> 嘉兴市</label>
<label><input type="checkbox" name="checkboxs" value="330500"> 湖州市</label>
<label> <input type="checkbox" id="checkbox" οnclick="checkAll()"> 全选</label>
</div>