Question

我有一个简单的网页设置，其中包含一个包含3个列表项的无序列表。每个列表项内部都是一个复选框，旁边有一些文本。我设置它，以便在单击列表项时，它突出显示该特定列表项（通过jQuery的'addClass'和'removeClass'方法。这一切都正常。

我想做的是能够选中或取消选中复选框而不选择该复选框的父元素。换句话说，如果列表项1当前突出显示，然后我单击列表项3的复选框，则列表项1应保持突出显示。到目前为止，我已尝试过几种不同的方法，但无济于事。

这是jsFiddle ......

http://jsfiddle.net/DXdR6/

这是代码......

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style>
.selected {
    background: blue;
    color: white;
    border: 1px solid black;
}

.unselected {
    background: white;
    color: black;
    border: 1px solid black;
}

ul {
    width: 100px;
    list-style-type: none;
}
</style>

<script>
$(function() {
    $("li").mousedown(function(){
        $("li").removeClass("unselected");
        $("li").removeClass("selected");
        $(this).addClass("selected");
    });
});
</script>

</head>
<body>

  <ul>
    <li class="unselected" ><input type="checkbox">Item 1</li>
    <li class="unselected" ><input type="checkbox">Item 2</li>
    <li class="unselected" ><input type="checkbox">Item 3</li>
  </ul>

</body>
</html>

有什么想法吗？

谢谢！

Answer 1

使用事件函数参数，例如e.target，如果目标是复选框，则过滤操作。 Updated fiddle here (click).

$("li").mousedown(function(e){
  if (e.target.nodeName !== 'INPUT') {
    $("li").removeClass("unselected");
    $("li").removeClass("selected");
    $(this).addClass("selected");
  }
});

您也可以使用$(e.target).attr('type') === 'checkbox'。我认为还有其他几种获取输入类型的方法。

Answer 2

试试这个，

$(function() {

    $("input").change(function(){

        if($(this).is(':checked'))
        {
            $(this).parent().removeClass().addClass("selected");   
        }
        else
        {
            $(this).parent().removeClass().addClass("unselected");
        }

   });
});

选中/取消选中复选框而不选择其父元素？

2 个答案:

DEMO