单击以选中复选框时避免关闭下拉菜单

Posted 2023-05-08

【中文标题】单击以选中复选框时避免关闭下拉菜单

【英文标题】：Avoid closing dropdown when clicking to checked a checkbox

【发布时间】：2017-12-25 20:54:00

【问题描述】：

当用户单击下拉列表中的复选框时，我使用以下代码隐藏或显示表中的列：

JS

$('#columnsListDropDown :checkbox').on('change', function() 
      $("#myTable").find("[data-column='" + this.value + "']").toggle(this.checked);
      return false;
);

html

<ul class="dropdown-menu columnsFilterDropDownMenu" id="columnsListDropDown">
    <li>
        <label class="small" data-value="Type">
            <input type="checkbox" value="Type" checked="true">Type</label>
    </li>
    <li>
        <label class="small" data-value="Release">
            <input type="checkbox" value="Release" checked="true">Release</label>
    </li>
</ul>

当我点击复选框本身时，下拉菜单保持打开状态，但当我点击标签时，下拉菜单关闭。在这种情况下，我会让下拉菜单打开。我该怎么做？

【问题讨论】：

请包含所有相关代码，如css等

this.value 和 this.checked 是否正确？

@ElmerDantas 是的，因为单击复选框时代码可以正常工作

点击标签时onchange函数会触发吗（可以在里面添加console.log查看）？如果没有，您可以添加类似$('#columnsListDropDown :label').on('click', function() /* add code to get the checkbox linked to this label */.trigger('change');

@Kaddath 是的，我放了一个断点来检查，当点击标签时我很好地进入了函数

【参考方案1】：

正如 Kaddath 在 cmets event.stopPropagation 中所建议的那样，标签点击应该停止事件冒泡，因此下拉菜单不应该折叠。

示例代码：

$('#columnsListDropDown li label').click(function(e)
    e.stopPropagation();
)

请参考JSFiddle here。