checkbox的全选实现

1. 逻辑梳理

    多选按钮点击事件：如果元素被选中，循环子项，设为选中；否则，循环子项，设为不选。
    子项按钮点击事件：定义是否存在未选择子项flag，默认false。循环子项，如果未选择，修改flag为true。循环结束，如果flag=true，全选按钮不选，否则选中。

 2. 页面实现

     JS部分

//全选按钮点击事件
function allCheck(allBoxName,itemBoxName) {

	if($("input[name="+allBoxName+"]").prop("checked")){
		$("input[name=" + itemBoxName + "]").prop("checked",true);
	} else {
		$("input[name=" + itemBoxName + "]").prop("checked",false);
	}
}

//子项按钮点击事件
function itemCheck(allBoxName,itemBoxName) {
	var hasNoSel = false;
	var itemBoxArray = $("input[name="+itemBoxName+"]");
	itemBoxArray.each(function() {
		if(!$(this).prop("checked")){
			hasNoSel = true;
		}
	});
	if(hasNoSel){
		$("input[name="+allBoxName+"]").prop("checked",false);
	} else {
		$("input[name="+allBoxName+"]").prop("checked",true);
	}
}

     HTML部分 

<input type="checkbox" name="checkAll" onclick="allCheck('checkAll','checkItem')" />
<span style="color: #1265A7; font: '微软雅黑';">全选</span>

<input type="checkbox" name="checkItem" id="checkItem01" value="01" th:text="子项1" onclick="itemCheck('checkAll','checkItem')" />
<input type="checkbox" name="checkItem" id="checkItem02" value="02" th:text="子项2" onclick="itemCheck('checkAll','checkItem')" />
<input type="checkbox" name="checkItem" id="checkItem03" value="03" th:text="子项3" onclick="itemCheck('checkAll','checkItem')" />
<input type="checkbox" name="checkItem" id="checkItem04" value="04" th:text="子项4" onclick="itemCheck('checkAll','checkItem')" />

3. 效果预览 样式可自行调整

4. 代码复用

    仅需修改HTML部分，修改多选项及其子项的name，并且对应点击事件中的两个参数即可。