title: Get checkboxs value with Jquery return wrong values sometimes but not everytime
body: <p>I try to get the checkbox checked values,
  It "works" not really well, sometimes I have the right value, sometime not, could you explain me why and how I can fix this ? </p>
  
  <p>The purpose is at this end to build an array of all the values checked</p>
  
  <p>Here a snippet : </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>$( "input" ).on( "click", function() {
    alert('test : ' + $( "input:checked" ).val() + " is checked!"  );
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="options-check"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4  col-lg-4"&gt;
  
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="abc" value="all"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox1"&gt;All&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input type="checkbox" id="inlineCheckbox2" name="abc"  value="businessrules"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox2"&gt;Business Rules&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input  type="checkbox" id="inlineCheckbox3" name="abc" value="scriptinclude"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox3"&gt;Script Include&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input  type="checkbox" id="inlineCheckbox4" name="abc" value="schedulejobs"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox4"&gt;Scheduled Jobs&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-4 col-lg-4"&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input  type="checkbox" id="inlineCheckbox5" name="abc" value="uiaction"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox5"&gt;UI Action&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input  type="checkbox" id="inlineCheckbox6" name="abc" value="uipolicies"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox6"&gt;UI Policies&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input  type="checkbox" id="inlineCheckbox7" name="abc" value="uimacro"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox7"&gt;UI Macro&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
            &lt;input type="checkbox" id="inlineCheckbox8" name="abc" value="uipage"&gt;
            &lt;label class="form-check-label" for="inlineCheckbox8"&gt;UI Page&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks a lot for your help</p>