Question

我有下面的代码“正在工作”，但我无法弄清楚如何让click事件只是为了复选框。现在只需点击li将切换我的背景颜色......我在这里完全错过了一些东西。我需要的是，对于每个选中了复选框的li，bg颜色将会改变，当取消选中时，它将返回到之前的颜色。谁能帮我吗。

<script type="text/javascript">

$(document).ready(function() {
    $('.list-item').find('input:checkbox').each(function(index) {
        var selectedlistitem = $('.list-item');
        $(selectedlistitem).click(function () {                     
            $(this).toggleClass('selected');
        });
    });
});
</script>


<ul> class="list-item-container">
<li class="list-item"><input type="checkbox" />Item 1</li>
<li class="list-item"><input type="checkbox" />Item 2</li>
<li class="list-item"><input type="checkbox" />Item 3</li>
</ul>

Answer 1

你过分复杂了，你只需要这样做：

$('.list-item :checkbox').click(function() {
    $(this).closest('.list-item').toggleClass('selected');
});

演示：http://jsfiddle.net/ambiguous/ddkD9/

您不需要$().find().each()，您可以将$().find()展平为单个选择器，jQuery函数已经（几乎总是）基于集合，因此不需要使用{{3}进行迭代}。此外，input:checkbox是多余的，所有复选框都已<input>，因此您只需要each来查找复选框。

在回调中，您可以使用:checkbox从复选框this返回DOM，以查找包含<li class="list-item">的内容。

Answer 2

$('.list-item input:checkbox').click(function() {
    var selectedlistitem = $(this).parent('li');
    selectedlistitem.toggleClass('selected');
});

http://jsfiddle.net/3s2pk/

您不需要执行每个函数，并且在每个函数中应该引用单击的元素本身，而不是执行全局选择器。

Answer 3

$('.list-item :checkbox').click(function () {
    $(this).parent().toggleClass('selected');
});

JQuery选中的复选框项目背景颜色

3 个答案: