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

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

要解决此问题，您可以将输入包装在 label 中.您还可以使用 value 大大简化您的代码。用于保存列名的复选框，以及 toggle()与 checked复选框的状态。然后您还可以 Hook 到 change复选框上的事件直接作为 <a>不会干扰点击事件。试试这个:

$('#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>