Javascript 当在具有单击事件的li中时，停止复选框被选中两次

我正在用jQuery编写一个简单的下拉菜单，每个项都有一个复选框。当我点击

li

元素时，复选框被选中。但是，如果我单击复选框本身，它不会选择，因为它会被有效地选中两次。我怎样才能阻止这种事情发生

jsFiddle：

HTML:

<div id="dropdown">Channels</div>
<ul class="droplist">
    <li>News <input type="checkbox" /></li>
    <li>Sport <input type="checkbox" /></li>
    <li>Science <input type="checkbox" /></li>
    <li>Health <input type="checkbox" /></li>
    <li>All</li>
</ul>

div#dropdown {
    border: 1px solid #000;
    width: 150px;
    height: 20px;
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
}

ul.droplist {
    display: none;
    width: 170px;
    border: 1px solid #000;
    border-bottom: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    background-color: #fff;
}

ul.droplist li {
    border-bottom: 1px solid #000;
    padding: 10px;
    cursor: pointer;
}

ul.droplist li input {
    float: right;
}

$(document).ready(function(){

    $("#dropdown").click(function() {
        $(this).next().slideToggle(200);
    });

    $(".droplist li").click(function(e) {
        // Toggle the checkbox
        var input = $(this).children("input");
        $(input).prop("checked", !$(input).prop("checked"));
    });

    $(".droplist li:last").click(function () {
        // Select all boxes
        var check = $('.droplist li input:not(:checked)').length;
        $(".droplist li input").prop("checked", check);
    });

});

JS:

<div id="dropdown">Channels</div>
<ul class="droplist">
    <li>News <input type="checkbox" /></li>
    <li>Sport <input type="checkbox" /></li>
    <li>Science <input type="checkbox" /></li>
    <li>Health <input type="checkbox" /></li>
    <li>All</li>
</ul>

div#dropdown {
    border: 1px solid #000;
    width: 150px;
    height: 20px;
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
}

ul.droplist {
    display: none;
    width: 170px;
    border: 1px solid #000;
    border-bottom: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    position: absolute;
    background-color: #fff;
}

ul.droplist li {
    border-bottom: 1px solid #000;
    padding: 10px;
    cursor: pointer;
}

ul.droplist li input {
    float: right;
}

$(document).ready(function(){

    $("#dropdown").click(function() {
        $(this).next().slideToggle(200);
    });

    $(".droplist li").click(function(e) {
        // Toggle the checkbox
        var input = $(this).children("input");
        $(input).prop("checked", !$(input).prop("checked"));
    });

    $(".droplist li:last").click(function () {
        // Select all boxes
        var check = $('.droplist li input:not(:checked)').length;
        $(".droplist li input").prop("checked", check);
    });

});

您可以在复选框中选择事件的名称：

$(".droplist li :checkbox").click(function (e) {
    e.stopPropagation();
});

这将防止事件在DOM树中冒泡到父

li

元素（如您所说，它触发绑定到它的事件处理程序）

---

作为旁注，您可以修改代码以利用事件委派，这更有效，因为每个

li

元素只有一个事件处理程序，而不是一个。例如：

$(".droplist").on("click", "li", function (e) {
    // Toggle the checkbox
    var input = $(this).children("input");
    $(input).prop("checked", !$(input).prop("checked"));
});

有关更多详细信息，请参阅方法。

您可以在复选框中选择事件的名称：

$(".droplist li :checkbox").click(function (e) {
    e.stopPropagation();
});

这将防止事件在DOM树中冒泡到父

li

元素（如您所说，它触发绑定到它的事件处理程序）

---

作为旁注，您可以修改代码以利用事件委派，这更有效，因为每个

li

元素只有一个事件处理程序，而不是一个。例如：

$(".droplist").on("click", "li", function (e) {
    // Toggle the checkbox
    var input = $(this).children("input");
    $(input).prop("checked", !$(input).prop("checked"));
});

---

有关详细信息，请参阅该方法。

用标签包装复选框（标签与输入共享浏览器本机单击事件）

---

像这样，你应该没事。您的解决方案存在的问题是，当用户点击输入时，原生浏览器复选框函数和jQuery就会互相杀死。（浏览器选中复选框，jQuery取消选中）

用标签包装复选框（标签与输入共享浏览器本机单击事件）

像这样，你应该没事。您的解决方案存在的问题是，当用户点击输入时，原生浏览器复选框函数和jQuery就会互相杀死。（浏览器选中复选框，jQuery取消选中）