Javascript 在下拉列表中单击复选框时，复选框保持选中状态

我有一个包含复选框的下拉列表：

<ul class="dropdown-menu columnsFilterDropDownMenu" id="columnsListDropDown">
   <li><a href="#" class="small" data-value="Type" tabindex="-1"><input type="checkbox" checked="">&nbsp;Type</a></li>
   <li><a href="#" class="small" data-value="Release" tabindex="-1"><input type="checkbox" checked="">&nbsp;Release</a></li>
</ul>

---

问题在于无法将表单输入包装到

元素中。

a

将拦截单击事件

要解决此问题，您可以将输入包装在

标签中。通过使用复选框的
值
来保存列名，还可以使用复选框的
选中状态来保存
切换（）
，从而大大简化代码。然后，您还可以直接挂接复选框上的
change
事件，因为
不会干扰单击事件。试试这个：


$（'#columnsListDropDown:checkbox'）。在（'change'，function（）上{
$（“#myTable”）.find（“[data column='”+this.value+“']”）toggle（this.checked）；
});



类型


释放


类型
释放
使用event.stopPropagation（）和event.preventDefault禁用事件

$('#columnsListDropDown a').on('click', function( event ) {

    var input = $(this).find("input");
    var columnName = $.trim($(this).text());
    if (event.target.localName === "input") {
    // Case where user has clicked on the input
        if ($(input).is(':checked')) {
            $("#myTable").find("[data-column='"+columnName+"']").show()
        } else {
            $("#myTable").find("[data-column='"+columnName+"']").hide()
        }
    } else {
     event.preventDefault();
     event.stopPropagation();
    // Case where the user has clicked on the label, or in li element
        if ($(input).is(':checked')) {
            $("#myTable").find("[data-column='"+columnName+"']").hide()
            $(input).prop('checked', false);
        } else {
            $("#myTable").find("[data-column='"+columnName+"']").show()
            $(input).prop('checked', true);
        }
    }
    return false;
});

`
问题在于无法将表单输入包装到
元素中。
a
将拦截click eventwrap in label Instedi的工作非常好！谢谢还有另一个问题：当我点击标签时，我的下拉列表关闭，而它应该保持打开状态，以便能够选中或取消选中其他复选框。很难说为什么你显示的代码会出现这种情况，但是尝试调用
stopPropagation（）
处理传递给Handler的事件。我建议开始一个新的问题，确保包含您正在使用的下拉库的详细信息。
$('#columnsListDropDown a').on('click', function( event ) {

    var input = $(this).find("input");
    var columnName = $.trim($(this).text());
    if (event.target.localName === "input") {
    // Case where user has clicked on the input
        if ($(input).is(':checked')) {
            $("#myTable").find("[data-column='"+columnName+"']").show()
        } else {
            $("#myTable").find("[data-column='"+columnName+"']").hide()
        }
    } else {
     event.preventDefault();
     event.stopPropagation();
    // Case where the user has clicked on the label, or in li element
        if ($(input).is(':checked')) {
            $("#myTable").find("[data-column='"+columnName+"']").hide()
            $(input).prop('checked', false);
        } else {
            $("#myTable").find("[data-column='"+columnName+"']").show()
            $(input).prop('checked', true);
        }
    }
    return false;
});