Question

我有一个包含checkeboxes的下拉列表：

<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将拦截点击事件。

要解决此问题，您可以将输入包装在label中。您还可以使用复选框的value来保存列名称，并使用复选框的toggle()状态checked来大规模简化代码。然后，您还可以直接挂钩复选框上的change事件，因为<a>不会干扰点击事件。试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

`

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

2 个答案: