<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>收入计算器</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="row">
<input type="checkbox" class="select-all"/>
全选
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
</div>
<div class="row">
<input type="checkbox" class="select-all"/>
全选
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
</div>
<div class="row">
<input type="checkbox" class="select-all"/>
全选
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
<input type="checkbox" class="single"/>
</div>
<script>
$('.row').each(function () {
// 一行一行的处理
var row = $(this);
// 全选功能，点击全选，选中所有
row.find(".select-all").on("click", function(){
// 控制本行的
var checkboxes = row.find(".single");
if($(this).is(":checked")){
checkboxes.prop("checked", true);
}else{
checkboxes.prop("checked", false);
}
});
// 点击单条，控制全选的状态
row.find(".single").on("click", function(){
// 单条选择后，获取没有选中的数量
var unCheckedLength = row.find(".single:not(:checked)").length;
if (unCheckedLength > 0) {
row.find(".select-all").prop("checked", false);
} else {
row.find(".select-all").prop("checked", true);
}
});
});
</script>
</body>
</html>