DEMO

Question

我正在尝试创建一个下拉菜单，允许用户通过复选框选择多个选项。我正在使用jQuery，以便用户只需在复选框容器内点击（即复选框文本或文本周围的空白），将复选框标记为选中或取消选中，无需单独复选复选框：{ {3}}

<script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu li").click(function () {
                    var cb = $(this).find('input:checkbox');
                    var chk = cb.prop("checked");
                    if (!chk) {
                        cb.prop("checked", true);
                    }
                    else {
                        cb.removeProp("checked");
                    }
                });
});

这适用于复选框容器，但是当您实际单击复选框本身时它会失败！实际上点击复选框似乎没有触发切换（你可能必须在IE或Firefox中打开jsfiddle才能看到这个，因为我的Chrome版本没有正确渲染这个jsfiddle。）

我对jQuery / javascript很新，所以我确定我在这里某处犯了一个基本错误。我不知道如何解决的另一个问题是如何使下拉列表粘贴，＃34;因此，每次检查选项时，它都不会立即消失。

非常感谢您提供的任何帮助。

Answer 1

此处：http://jsfiddle.net/umidbek_karimov/y84ne/

1：将input[checkbox]换入label：

<label><input type="checkbox" value="App1" />App1</label>

2：在点击事件中使用.stopPropagation()方法：

$(document).ready(function () {
    $(".dropdown-menu li label").click(function (ev) {
        ev.stopPropagation();
    });
});

3：我还在标签上使用了display: block css属性

#advanced_options label {
    font-weight:normal !important;
    font-family: Tahoma, Geneva, sans-serif;
    display:block;
    cursor: pointer;
}

Answer 2

$(document).ready(function(){

    // Your code here.

    $('.dropdown-menu li input:checkbox').on('click', function(e){
        e.stopPropagation();
    });
});

附加到<li>的事件也会影响所有子元素。因此，当您单击复选框以选中/取消选中它时，会触发附加到<li>的事件，从而使其基本上反转检查/取消选中操作。

要解决此问题，我们会在复选框中添加e.stopPropagation();，以防止它触发任何父click事件。

作为替代方案，您可能需要考虑非JavaScript解决方案，将列表项的内容包装在标签中，如下所示。当您单击标签内的任何位置时，浏览器将本机触发嵌套复选框的检查/取消选中操作。

<li>
    <label>
        <input type="checkbox" value="...">
        Checkbox
    </label>
</li>

<强>更新

由于您要保留其他click事件（来自Bootstrap），因此当您直接单击复选框时，您真正想要做的就是中止当前click事件。

$(document).ready(function () {
    $(".dropdown-menu li").on('click', function (e) {

        // If you clicked on the checkbox directly, abort.
        if ($(e.target).is('input'))
        {
            return;
        }

        var chk = $(this).find('input:checkbox').prop("checked");
        if (!chk) $(this).find('input:checkbox').prop("checked", true);
        else $(this).find('input:checkbox').removeProp("checked");
    });
});

Answer 3

复选框上的点击事件正在传播到容器，因此从技术上来说，复选框将被检查，然后立即取消选中（反之亦然）。您需要在复选框的单击事件上停止事件传播。

Answer 4

$('.dropdown-menu').on('click', 'input[type="checkbox"]', function(e) {
    e.stopPropagation();
});

JQuery - 单击复选框容器工作，单击复选框不会

4 个答案:

DEMO