在下拉列表中單擊復選框時，該復選框保持選中狀態

Question

我有一個包含復選框的下拉列表：

<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>

當我單擊下拉菜單中的條目時，我想將專用列隱藏到表中。 當我單擊標簽時，我可以正常工作，但是當我單擊復選框時，該復選框保持不變。

$('#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 {
    // 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;
});

Answer 1

問題是因為您不能將表單輸入包裝在<a>元素中。 a將攔截click事件。

要解決此問題，您可以將輸入內容包裝在label 。 您還可以通過使用復選框的value保存列名，以及使用復選框的checked狀態toggle()來大大簡化代碼。 然后，您也可以直接在復選框上掛鈎到change事件，因為<a>不會干擾click事件。 嘗試這個：

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class="dropdown-menu columnsFilterDropDownMenu" id="columnsListDropDown"> <li> <label class="small" data-value="Type"> <input type="checkbox" checked="" value="Type"> Type </label> </li> <li> <label class="small" data-value="Release"> <input type="checkbox" checked="" value="Release"> Release </label> </li> </ul> <table id="myTable"> <tr> <td data-column="Type">Type</td> <td data-column="Release">Release</td> </tr> </table> 

Answer 2

使用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;
});

`