javascript - 不属于特定类的 JQuery 复选框选择器

Question

我正在努力让它发挥作用。我认为解决方案并不难找到，但我的大脑很快就会爆炸......

所以我有一堆带有process类的div

在每个 div 内，我都有不同数量的复选框。

我想在选中所有复选框时触发一个事件，但最后一个 process 类中的复选框除外。

这是基础

if(!$(':checkbox').not(':checked').length > 0)
{
  //All checkbox are checked
}

所以我尝试

if(!$(':checkbox').not('.process:last').not(':checked').length > 0)

但这不是解决方案。

Answer 1

根据您的问题，我假设以下 HTML 并为您找到了解决方案:

$(function () {
  $(".check").click(function () {
    alert($(".process:not(.process:last)").find(":checkbox").length == $(".process:not(.process:last)").find(":checkbox:checked").length ? "Yes" : "No");
  });
  $(".check_all").click(function () {
    $(".process").find(":checkbox").prop("checked", true);
  });
  $(".check_no_last").click(function () {
    $(".process:not(.process:last)").find(":checkbox").prop("checked", true);
  });
});

label {display: inline-block; margin: 5px 25px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="process">
  <div>Process #1
    <label><input type="checkbox" name="" id=""> Checkbox 1</label>
    <label><input type="checkbox" name="" id=""> Checkbox 2</label>
    <label><input type="checkbox" name="" id=""> Checkbox 3</label>
  </div>
</div>
<div class="process">
  <div>Process #2
    <label><input type="checkbox" name="" id=""> Checkbox 1</label>
    <label><input type="checkbox" name="" id=""> Checkbox 2</label>
    <label><input type="checkbox" name="" id=""> Checkbox 3</label>
  </div>
</div>
<div class="process">
  <div>Process #3
    <label><input type="checkbox" name="" id=""> Checkbox 1</label>
    <label><input type="checkbox" name="" id=""> Checkbox 2</label>
    <label><input type="checkbox" name="" id=""> Checkbox 3</label>
  </div>
</div>
<div class="process">
  <div>Process #4
    <label><input type="checkbox" name="" id=""> Checkbox 1</label>
    <label><input type="checkbox" name="" id=""> Checkbox 2</label>
    <label><input type="checkbox" name="" id=""> Checkbox 3</label>
  </div>
</div>
<div class="process">
  <div>Process #5
    <label><input type="checkbox" name="" id=""> Checkbox 1</label>
    <label><input type="checkbox" name="" id=""> Checkbox 2</label>
    <label><input type="checkbox" name="" id=""> Checkbox 3</label>
  </div>
</div>
<input type="submit" value="Check All" class="check_all" />
<input type="submit" value="Check But Last" class="check_no_last" />
<input type="submit" value="Check" class="check" />