1

这是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 添加类？

谢谢

4

5 回答 5

2

您错误地放置$this('input:checkbox')了 $('input:checkbox')，您可以使用最接近（）来查找选择器在祖先层次结构中的第一次出现。

现场演示

$('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");
    }
});​
于 2012-11-29T10:48:23.937 回答
1

您需要使用closest来查找最近的.checkbox-wrap元素：

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

有关最接近（）的更多信息

另外，我假设$this一开始是 jQuery 的别名版本，而不是拼写错误？

于 2012-11-29T10:48:15.077 回答
1

您可以使用第 n 个子选择器

于 2012-11-29T10:49:21.487 回答
0

您可以使用:eq()Selector 来执行此操作

$(".checkbox-wrap:eq(0)").addClass("active-checkbox");

看看这个_

于 2012-11-29T10:49:58.587 回答
0 
$this('input:checkbox').change(function(){
   $(this).parents('div.checkbox-wrap').toggleClass("active-checkbox", $(this).is(":checked"));
});
于 2012-11-29T10:51:56.917 回答