title: Get if checkbox is checked or not in jquery/ES6
body: <p>Following is my jQuery code by which I am trying to retrieve whether the checkbox is clicked or not. I used both <code>is</code> and <code>prop</code> but somehow its always returning <code>false</code> and <code>undefined</code> in console. Let me know what I am doing wrong here.</p>
  
  <p>Also, let me know the more better way to handle the checkbox value is to target the <code>click</code> or <code>change</code> event on checkbox( currently I am listening to <code>click</code> event).</p>
  
  <p><strong>jQuery Code -</strong></p>
  
  <pre><code>const $document = $(document);
  $document.ready(() =&gt; {
      $("input[type='checkbox']").on('click', () =&gt; {
          console.log("Checked Value 'is' :: ", $(this).is(':checked'));
          console.log("Checked Value 'prop' :: ", $(this).prop('checked'));
      })
  })
  </code></pre>
  
  <p><strong>HTML CODE -</strong></p>
  
  <pre><code>&lt;form name="myForm" id="#myForm"&gt;
      &lt;div&gt;
          &lt;p&gt;&lt;input type="checkbox" name="accept-t-and-c" /&gt; I accept terms and conditions&lt;/p&gt;
      &lt;/div&gt;
      &lt;div&gt;   
          &lt;button type="submit" name="submit"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JSFIDDLE -</strong>  <a href="https://jsfiddle.net/82Lz1c8w/4/" rel="nofollow noreferrer">https://jsfiddle.net/82Lz1c8w/4/</a> </p>
  
  <p><strong>EDIT -</strong>
  Few of the folks before getting into the question just marking it as duplicate however in this case the solution that they are referring with the below mentioned links won't work as I am using arrow functions and its changing the context. Please read the answers for the support.</p>