jQuery - 如何为包含相对于选中框的复选框的单个 div 添加类？

Question

这是 HTML:

<ul>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
  <li>
    <div class="checkbox-wrap">
      <p>Check this: 
      <input type="checkbox" />
      </p>
    </div>
  </li>
</ul>

jQuery:

$this('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.checkbox-wrap').addClass("active-checkbox");
    } else {
        $('div.checkbox-wrap').removeClass("active-checkbox");
    }
});

当您选中一个复选框时，“active-checkbox”类将被添加到整个 3 个 div 中。有没有办法在不使用 ID 或自定义类名的情况下为单个 div 添加类，而不是为整个 3 个 div 添加类？

谢谢

Answer 1

您错误地使用了 $this('input:checkbox') 而不是 $('input:checkbox')，您可以使用 closest()查找选择器在祖先层次结构中第一次出现的位置。

<强> Live Demo

$('input:checkbox').change(function(){       
    if($(this).is(":checked")) {
        $(this).closest('div.checkbox-wrap').addClass("active-checkbox");
    } else {
        $(this).closest('div.checkbox-wrap').removeClass("active-checkbox");
    }
});​