Checkbox stays checked when clicking on it in a dropdown

Question

I have a dropdown list containing checkeboxes :

Answer 1

The problem is because you cannot wrap a form input in an 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 will not be interfering with the click event. Try this:

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

  

    
      
      Type
    
  
  

    
      
      Release
    
  



  

    
Type
    
Release