在下拉列表中点击时，复选框保持选中状态 [英] Checkbox stays checked when clicking on it in a dropdown

问题描述

 < ul class =dropdown-menu columnsFilterDropDownMenuid =columnsListDropDown > 
< li>< a href =＃class =smalldata-value =Typetabindex = -  1>< input type =checkboxchecked => &安培; NBSP;的类型< / A>< /锂> 
< li>< a href =＃class =smalldata-value =Releasetabindex = -  1>< input type =checkboxchecked => &安培; NBSP;推出< / A>< /锂> 
< / ul> 
  

当我点击我的下拉菜单中的一个条目时，我想将专用列隐藏到表中。当我点击标签时，我工作的很好，但当我点击复选框时，复选框保持相同的状态。

  $（'＃columnsListDropDown a'）。on（'click'，function（event）{
 var input = $（this）.find（input）; 
 var columnName = $ .trim $（this）.text（））; 
 if（event.target.localName ===input）{
 //用户点击输入
的情况if（$ （input）.is（'：checked'））{
 $（＃myTable）。find（[data-column ='+ columnName +'）。show（）
 } else {
 $（＃myTable）。find（[data-column ='+ columnName +'）。hide（）
} 
} else {
 //用户点击标签或li元素的情况
 if（$（input）.is（'：checked'））{
 $（＃myTable）。 find（[data-column ='+ columnName +'）。hide（）
 $（input）.prop（'checked'，false）; 
} else {
 $（ ＃myTable的）。找到（[数据科拉姆（）'）。（'checked'，true）; 
} 
} 
返回false; 
}）; 
  

解决方案

问题是因为您无法将表单输入一个< a> 元素。 a 会拦截click事件。

要解决这个问题，你可以将输入包装在标签。您还可以通过使用复选框的值来大量简化您的代码，以保存列名称，并且还包含 toggle（）复选框的已勾选状态。您也可以直接勾选复选框中的 change 事件，因为< a> 不会干扰点击事件。试试这个：
$ b

'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 columnsFilterDropDownMenuid =columnsListDropDown> <李> < label class =smalldata-value =Type> < input type =checkboxchecked =value =Type>键入< / label> < /锂> <李> < label class =smalldata-value =发布> < input type =checkboxchecked =value =Release>发布< / label> < / li>< / ul>< table id =myTable> < TR> < td data-column =Type> Type< / td> < td data-column =发布>发布< / td> < / TR>< /表>  

I have a dropdown list containing 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>

When i click on an entry in my dropdown, I wants to hide the dedicated columns into a table. I works fine when i clicked on the label, but when i click on the checkbox, the checkbox stays in the same state.

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

解决方案

The problem is because you cannot wrap a form input in an <a> element. The a will intercept the click event.

To fix this you can instead wrap the inputs in a label. You can also massively simplify your code by using the value of the checkbox to hold the column name, and also toggle() with the checked state of the checkbox. You can then also hook to the change event on the checkboxes directly as the <a> will not be interfering with the click event. Try this:

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

这篇关于在下拉列表中点击时，复选框保持选中状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！