Question

我正在尝试取消选择/选择以下dd.options中的所有内容，并为每个选择“dept_checkbox”。这个片段中每个dd块中有大约1到100个复选框（我在第一个“dept_checkbox”部分中放置了2个课程，在下一个中放了1个）。

<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*
    });     
  }

我试图远离调用任何“名称”或“价值”值，因为它们都会改变。只有保持静态的东西（它们将显示所有结果）对于每个Select all复选框和'options'类都是'dept_checkbox'，它将保留前一个select / deselect all按钮的复选框。

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>

Answer 2

尝试$('.options').find(':checkbox ').prop({checked: true})之类的内容这将查找选项中的每个复选框，并将'：checked'属性设置为true。

Answer 3

我们走了：

＆＃13;

checkCheckboxes = function(check){
$(".accordion input[type='checkbox']").prop('checked',check);
}

//Uncheck all the checkboxes
checkCheckboxes(false);
//Check all the checkboxes
checkCheckboxes(true);

＆＃13;

<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" 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>

＆＃13;

选中/取消选中全部复选框以显示下一个块元素中的复选框

3 个答案: