如何在内部容器中挑选出复选框单击事件？答案

【问题标题】：How to single out a checkbox click event within an inside container?如何在内部容器中挑选出复选框单击事件？
【发布时间】：2011-02-28 10:08:29
【问题描述】：

我有一个带有 div 的概览列表，并且每个 div 都有一对，其中包含所有详细信息。如果您单击“intro” div，则详细的对将打开，而 intro 将被隐藏。每个 div 都有一个复选框。我遇到了一个问题，如果我点击“intro” div 的复选框，详细的 div 将打开，因为点击事件也发生在 intro div 上。我想出了一个解决方案，比如使用外部跨度，我存储所有打开的 div id。

<div class="divIntroHolder" id="divIntroHolder15">
            <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage" id="chkMessage15"/></span>

        </div>

        <div class="divDetailHolder" id="divDetailHolder15">
            <div class="divPicContainer">
                <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage"/></span>
            </div>
        </div>

为此我有一个这样的js

$(document).ready(function () {
$(".divIntroHolder").click(function () {
    var id = getId($(this).attr("id"));
    if (!isOpen("spanOpenDivs", id)) { //check if the div is open or not
        addTo("spanOpenDivs", id); // add to span
        $(this).hide();
        $("#divDetailHolder" + id).show();
    } else {
        removeFrom("spanOpenDivs", id); //remove from the span
    }
});

$(".chkMessage").click(function () {
    var id = $(this).val();
    //prevent opening the detailed div
    if (!isOpen("spanOpenDivs", id))
        addTo("spanOpenDivs", id);

    var clicked = $(this);
    $(".chkMessage").each(function () {
        if ($(this).val() == id) {
            $(this).attr("checked", clicked.attr("checked"));
        }
    });
 });

});

它使 js 有点复杂，我认为必须有一种更简单的方法来挑选出复选框单击事件。复选框被选中或未选中无关紧要，但它应该只是过滤掉点击事件。

如果有人对此问题有简单的解决方案，将不胜感激=)

【问题讨论】：

标签： jquery html checkbox

【解决方案1】：

$(".chkMessage").click(function (evt) {
    evt.stopPropagation();
    ...
}

jQuery event.stopPropagation()

【讨论】：