title: Changing checkbox to checked clicking on span does not work
body: <p>I want to develop a toggle button with a checkbox using css and jquery. I want to click on the span, which represents my toggle button, to change the property checked of the given checkbox. 
  Unfortunately the span does not change the property. However it goes into the right jQuery function. Using the button, it is going into the function and changing the property. Can you tell me why I cannot use the span to change the property? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on("click", ".taskcomplete2", function() {
    if ($(".taskcompletecheck").prop('checked')) {
      $(".taskcompletecheck").prop('checked', false);
    } else {
      $(".taskcompletecheck").prop('checked', true);
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  
  /* Hide default HTML checkbox */
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  
  /* The slider */
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked+.slider {
    background-color: #2196F3;
  }
  
  input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  
  /* Rounded sliders */
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;label class="switch"&gt;
     &lt;input type="checkbox" class="taskcompletecheck"&gt;
     &lt;span class="slider round taskcomplete2"&gt;&lt;/span&gt;
  &lt;/label&gt;
  &lt;button type="button" class="btn btn-danger taskcomplete2"&gt;Button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>