这是 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 添加类?
谢谢
最佳答案
您错误地使用了 $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");
}
});
关于jQuery - 如何为包含相对于选中框的复选框的单个 div 添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13624020/