title: Jquery onclick seems to prevent checkbox checking
body: <p>I have a form like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/eodDK.png" alt="enter image description here"></p>
  
  <p>The forms id is 'filter' and I have a jquery onclick function which runs code by using the following line:</p>
  
  <pre><code>$(document).on('click', '#filter', function(){
      //on click do the following
  </code></pre>
  
  <p>This works perfectly. However, I have now added a checkbox to the form. The rest of the form continues to work perfectly but the checkboxes are 'uncheckable'! (if they are set to be pre-checked they stay pre-checked, if they are set to be unchecked they stay unchecked). </p>
  
  <p>The only thing I can think is that the jquery on click function is overriding the checking of the checkboxes. Would this be the case? I can rectify the problem by using <code>blur</code> rather than <code>click</code> but ideally the code would run on click, and in any case id like to understand what is going on! Any ideas?</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p>This is the contents of the click handler:</p>
  
  <pre><code>$(document).on('click', '#filter', function(){
      //on click do the following
  
  
  
  
          var formData = $(this).serialize(); //put the form names and values into an array called formdata
          $.get('filtertest.php',formData,processData); //jquery ajax call
  
          function processData(data){
              if(data==1){
              $('#content').html('&lt;h2&gt;There is ' + data + ' property available!&lt;/h2&gt;');
              $('#linky').show();
              }
              else if(data==0){
              $('#content').html('&lt;h2&gt;There are no properties available, please expand your search options.&lt;/h2&gt;');
              $('#linky').hide();
              }
              else{
              $('#content').html('&lt;h2&gt;There are ' + data + ' properties available!&lt;/h2&gt;');
              $('#linky').show();
              }
          }//end processData
  
          return false; //stops the page redirect as per normal operation
          });//end submit
  </code></pre>
  
  <p>Basically the click function looks up matching details from the form in a database and returns the number of matching rows to put in the <code>processdata</code> function</p>