使用jQuery选择以前的div

Question

对于下面的代码示例，在检查courseID复选框时，我需要选中或取消选中courseGroup复选框。 td在页面上重复，基于另一个更高的查询。

我尝试使用：

$('.checkedCourse').click(function() {
  if ($(this).closest("td").find('.checkGroup').prop('checked') == true && this.checked == false)
  $(this).closest("td").find('.checkGroup').prop('checked', false); ...

但是它会取消选中页面上的所有courseGroup复选框，而不仅仅是该组的那些复选框。

我也试过$(this).parents('div:eq(0)')，但我不知道如何回到多个prev() div。

<td colspan="7">
    <cfoutput query="courseData">
        <div name="div1">
            <input type="checkbox" name="courseGroup" class="checkGroup">
            <div class="courseBreak"></div>
            <div class="courseLine">
                <div class="courseSection">#courseSections#</div>
                <div class="courseTitle">#courseTitle#</div>
                <div>
                    <input type="checkbox" class="checkedCourse" name="courseID" id="courseID" value="#courseId#">
                </div>
            </div>
        </div>
    </cfoutput>
</td>

这里是呈现的HTML：

当我取消选中该组课程时，我需要取消选中加粗组（例如AMBI 12-13 Sum）

Answer 1

由于您的复选框位于同一td内，因此无法使用该复选框查找匹配的复选框。但是，您可以使用div这是一个共同的父母。

$(this).closest(".courseLine").closest("div").find('.checkGroup')

我建议在外div上放一个课程，以避免对closest的2次调用。

Answer 2

你可以这样做：

if ($(this).closest(".courseLine").prevAll('.checkGroup:first').prop('checked') == true && this.checked == false)
   $(this).closest(".courseLine").prevAll('.checkGroup:first').prop('checked', false);

Answer 3

确保您的ID是唯一的，并尝试以下操作：

$('.checkedCourse').click(function () {
    $(this).closest('div[name=div1]').find('.checkGroup').prop('checked', !$(this).is(':checked'));
});

<强> jsFiddle example

Answer 4

感谢大家，结合你告诉我的作品！

if ($(this).closest('div[name=courseGrouping]').find('.checkGroup').prop('checked') == true && this.checked == false)
                $(this).closest('div[name=courseGrouping]').find('.checkGroup').prop('checked', false);

现在我只需弄明白如何在下面的表单上检查所有内容时检查顶部复选框，我确定我只需循环或其他东西。