title: Checkbox Value is reversed based on data that user enters, JavaScript needs to know when it is checked
body: <p>Good Evening,</p>
  
  <p>I have a scenario where users are checking a box to enter a row of data (or update a row of data) in a MySQL database via SparkJava/ Java. Everything is working as expected except for one little issue.</p>
  
  <p>If a value already exists in the database the Checkbox is the opposite of what it should be. So for example... The first time a user clicks the checkbox, it will add it to the database. However if you refresh the page it will try adding it again instead of removing it. </p>
  
  <p>I am almost certain the problem is with the following line:</p>
  
  <pre><code>var newValue = $(this).is(':checked') ? "add" : "remove";
  </code></pre>
  
  <p>But I am not sure how to make the JavaScript know if the value was checked already. Note that I am already doing this check with a conditional statement through Velocity in my HTML (this functionality works as expected).</p>
  
  <pre><code>#if ($amiibo.Collected == "Y")
  &lt;div class="star has-text-warning" id="star$amiibo.AmiiboID"&gt;
  #else
  &lt;div class="star" id="star$amiibo.AmiiboID"&gt;
  #end
  </code></pre>
  
  <p>Below is the full snippet from my Javascript:</p>
  
  <pre><code>$(document).ready(function(){
      $( ".mine" ).change(function() {
  
       var newValue = $(this).is(':checked') ? "add" : "remove";
  
          var amiibo = $(this).attr('id');
          var activeAmiiboID = amiibo.split('#')[1];
          var activeAmiiboName = amiibo.split('#')[2];
          $("#star"+activeAmiiboID).toggleClass("has-text-warning");
          console.log( "Handler for .change() called with value: " + newValue );
          console.log("activeAmiiboID is: "+ activeAmiiboID);
          console.log("Sending request to backend");
          if (newValue == 'add') {
              VanillaToasts.create({
                  title: 'Added to Favorites',
                  text: activeAmiiboName + ' has been added to your Collection.',
                  timeout: 4000,
                  type: 'success',
              });
          }
          else if (newValue == 'remove') {
              VanillaToasts.create({
                  title: 'Removed from Favorites',
                  text: activeAmiiboName + ' has been removed from your Collection.',
                  timeout: 4000,
                  type: 'error',
              });
          }
          $.ajax({
              url: '/collection',
              type: 'post',
              data: {
                  mine: newValue + "Amiibo",
                  amiiboID: activeAmiiboID
              },
              success: function () {
                  console.log("Request completed successfully");
              }
          });
      });
  </code></pre>
  
  <p>Any help would be greatly appreciated. Is there either...</p>
  
  <p>A) A way to make the javascript know this value is checked based on my conditional statement in velocity or 
  B) Another reasonable way to make the Javascript know this value is checked</p>
  
  <p>Thank you!
  Travis W.</p>