javascript - 选择/取消选择下一个 block 元素中复选框的所有复选框

Question

我正在尝试取消选择/选择以下 dd.options 中基于“dept_checkbox”的所有内容。对于此片段，每个 dd block 中大约有 1 到 100 多个复选框(我在第一个“dept_checkbox”部分中放置了 2 门类(class)，在下一个部分中放置了 1 门类(class))。

<div class="accordion">
  <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options") )"><a href="">EYES|VISI</a></dt>
  <dd class="options">
  <li>
    <label>
      <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY
    </label>
  </li>
  </dd>

  <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options") )"><a href="">EARS|HEAR</a></dt>
  <dd class="options">
  <li>
    <label>
      <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE
    </label>
  </li>
  </dd>      
</div>

到目前为止，我得到了以下内容，但我不知道如何去做，我正在尝试使用 jquery 来完成此任务。

  function selectAll(pID ){
    $('.'+pID).find(':checkbox').each(function(){
        *SELECT ALL CHECKBOXES IN OPTIONS SECTION FOR THIS PARENT*
    });     
  }

我试图避免调用任何“名称”或“值”值，因为它们都会发生变化。只有保持静态的东西(它们将与所有结果一起出现)是每个“全选”复选框的“dept_checkbox”和“选项”类，该类将保存上一个选择/取消全选按钮使用的复选框。

Answer 1

$('.dept_checkbox').click(function() {
  if ($(this).is(':checked')) {
    $(this).parent().next().find('input').prop('checked', true);
  } else {
    $(this).parent().next().find('input').prop('checked', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <dt><input class="dept_checkbox" type="checkbox"><a href="">EYES|VISI</a></dt>
  <dd class="options">
    <li>
      <label>
      <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX
    </label>
    </li>
    <li>
      <label>
      <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY
    </label>
    </li>
  </dd>

  <dt><input class="dept_checkbox" type="checkbox"><a href="">EARS|HEAR</a></dt>
  <dd class="options">
    <li>
      <label>
      <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE
    </label>
    </li>
  </dd>
</div>