title: Add value of toggle Box to total
body: <p>I'm trying to add a value of my toggle box to add-up and to display the total of the toggles selected (by yes or no)</p>
  
  <p>Can't find it to work as its not working like a check box.
  I used a Bootstrap toggle</p>
  
  <p>Does anyone have some suggestions how to add be able to add these values?</p>
  
  <p>I have a separate HTML page to show the totals.</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>var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $(".tables :checkbox");
  
  $checkboxes.on("change", function() {
    $checkboxes.each(function() {
      checkboxValues[this.id] = this.checked;
    });
  
    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
  });
  
  // On page load
  $.each(checkboxValues, function(key, value) {
    $("#" + key).prop('checked', value);
  });
  
  jQuery(document).ready(function($) {
    var sum = 0;
    $('#seriesTable :checkbox').click(function() {
      sum = 0;
      $('#seriesTable :checkbox:fa-smile-o').each(function(idx, elm) {
        sum += parseInt(elm.value, 10);
      });
  
      $('#sum').html(sum);
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=text] {
    padding: .5em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
  }
  
  #genre {
    padding-bottom: 20px:
  }
  
  table {
    width: 88%;
    text-align: center;
    margin-left: 6%
  }
  
  th {
    background-color: whitesmoke;
    font-family: Lato;
    font-size: 30px;
    color: dimgrey;
    margin-top: -10%
  }
  
  td {
    font-family: Quicksand;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: left;
  }
  
  h1 {
    letter-spacing: 2px;
    font-family: Lato;
    text-align: center;
    padding-bottom: 4%;
    text-decoration: underline;
    color: slategrey;
    font-size: 45px;
    font-weight: bold
  }
  
  .fa {
    font-size: 21px;
  }
  
  #Btn {
    background-color: transparent;
    color: darkslategray;
    padding: 15px;
    border: 2px solid white;
    margin-left: 48%;
    z-index: 999;
    border: 2px solid slategray;
    font-family: Quicksand;
  }
  
  #Btn:hover {
    background-color: slategray;
    color: white;
    padding: 15px;
    border: 2px solid slategray
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="seriesTable" class="tables" style="background-color: white;padding-bottom: 13%"&gt;
  
    &lt;table&gt;
      &lt;div id='sum'&gt;&lt;/div&gt;
      &lt;a href="TheWATCH.html"&gt;
        &lt;button type="button" id="Btn" class="btn btn-default"&gt;BACK&lt;/button&gt;
      &lt;/a&gt;
      &lt;h1&gt;SERIES&lt;/h1&gt;
  
      &lt;tr&gt;
        &lt;th&gt;HORROR/THRILLER&lt;/th&gt;
        &lt;th&gt;LIEZLE&lt;/th&gt;
        &lt;th&gt;LEE&lt;/th&gt;
        &lt;th&gt;GARETH&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Hannibal&lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="103" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="104" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="105" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="106" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="107" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="108" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Supernatural&lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="109" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="110" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="111" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="112" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="113" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="114" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Stranger Things&lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="115" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="200" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="117" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="118" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="201" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="119" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;th&gt;COMEDY&lt;/th&gt;
        &lt;th&gt;LIEZLE&lt;/th&gt;
        &lt;th&gt;LEE&lt;/th&gt;
        &lt;th&gt;GARETH&lt;/th&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Community&lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="120" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="121" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="122" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="123" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="124" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="125" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;th&gt;FANTASY/SCI-FI&lt;/th&gt;
        &lt;th&gt;LIEZLE&lt;/th&gt;
        &lt;th&gt;LEE&lt;/th&gt;
        &lt;th&gt;GARETH&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Legion&lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="126" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="127" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="128" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="129" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="130" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
          &lt;input type="checkbox" checked data-toggle="toggle" id="131" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;West World&lt;/td&gt;
        &lt;td&gt;
  
          &lt;input value="1" type="checkbox" id="132" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
          &lt;input type="checkbox" checked data-toggle="toggle" id="133" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="134" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
          &lt;input type="checkbox" checked data-toggle="toggle" id="135" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input value="1" type="checkbox" id="136" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
          &lt;input type="checkbox" checked data-toggle="toggle" id="137" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
        &lt;/td&gt;
        &lt;tr&gt;
          &lt;td&gt;Avatar&lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="138" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
            &lt;input type="checkbox" checked data-toggle="toggle" id="139" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="140" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
            &lt;input type="checkbox" checked data-toggle="toggle" id="141" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="142" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
  
            &lt;input type="checkbox" checked data-toggle="toggle" id="143" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;DRAMA&lt;/th&gt;
          &lt;th&gt;LIEZLE&lt;/th&gt;
          &lt;th&gt;LEE&lt;/th&gt;
          &lt;th&gt;GARETH&lt;/th&gt;
  
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;th&gt;MYSTERY / CRIME&lt;/th&gt;
          &lt;th&gt;LIEZLE&lt;/th&gt;
          &lt;th&gt;LEE&lt;/th&gt;
          &lt;th&gt;GARETH&lt;/th&gt;
  
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Doll House&lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="144" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="145" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="146" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="147" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="148" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="149" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Ancient Aliens&lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="150" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="151" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="checkbox" id="152" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="153" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="154" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="155" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Wonder of the World&lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="156" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="157" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="158" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="159" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input value="1" type="checkbox" id="160" checked data-toggle="toggle" data-on="&lt;i class='fa fa-smile-o'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-frown-o'&gt;&lt;/i&gt;"&gt;
            &lt;input type="checkbox" checked data-toggle="toggle" id="161" data-on="&lt;i class='fa fa-play'&gt;&lt;/i&gt;" data-off="&lt;i class='fa fa-pause'&gt;&lt;/i&gt;"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
    &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>