Question

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

所以我有一堆div process

在每个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" />

Answer 2

您可以尝试这样的事情：

＆＃13;

$('div.process:last input[type="checkbox"]').on('change', function() {
    var countOfAllCheckboxes = $(this).parent().find(':checkbox');
    var countOfAllCheckedCheckboxes = countOfAllCheckboxes.filter(':checked');
    if(countOfAllCheckedCheckboxes.length == countOfAllCheckboxes.length) {
        alert('All checkboxes are checked in last div.process!');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="process">
  <input type="checkbox" name="chk" /> Checkbox1 in First Div
</div>
<div class="process">
  <input type="checkbox" name="chk"/> Checkbox1 in Last Div.process
  <input type="checkbox" name="chk"/> Checkbox2 in Last Div.process
<div>

＆＃13;

JQuery复选框选择器，它不在特定的类中

2 个答案: