Question

我试图添加我的切换框的值来添加并显示所选择的切换总数（是或否）

无法找到它，因为它不像复选框那样工作。我使用了Bootstrap切换

有没有人有一些建议如何添加能够添加这些值？

我有一个单独的HTML页面来显示总数。

＆＃13;

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);

  });

});

＆＃13;

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
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="seriesTable" class="tables" style="background-color: white;padding-bottom: 13%">

  <table>
    <div id='sum'></div>
    <a href="TheWATCH.html">
      <button type="button" id="Btn" class="btn btn-default">BACK</button>
    </a>
    <h1>SERIES</h1>

    <tr>
      <th>HORROR/THRILLER</th>
      <th>LIEZLE</th>
      <th>LEE</th>
      <th>GARETH</th>
    </tr>
    <tr>
      <td>Hannibal</td>
      <td>
        <input value="1" type="checkbox" id="103" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="104" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="105" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="106" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="107" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="108" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
    </tr>
    <tr>
      <td>Supernatural</td>
      <td>
        <input value="1" type="checkbox" id="109" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="110" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="111" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="112" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="113" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="114" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>

    </tr>
    <tr>
      <td>Stranger Things</td>
      <td>
        <input value="1" type="checkbox" id="115" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="200" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="117" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="118" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="201" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="119" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
    </tr>

    <tr>
      <th>COMEDY</th>
      <th>LIEZLE</th>
      <th>LEE</th>
      <th>GARETH</th>

    </tr>
    <tr>
      <td>Community</td>
      <td>
        <input value="1" type="checkbox" id="120" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="121" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="122" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="123" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="124" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="125" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
    </tr>

    <tr>
      <th>FANTASY/SCI-FI</th>
      <th>LIEZLE</th>
      <th>LEE</th>
      <th>GARETH</th>
    </tr>
    <tr>
      <td>Legion</td>
      <td>
        <input value="1" type="checkbox" id="126" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="127" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="128" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="129" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="130" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
        <input type="checkbox" checked data-toggle="toggle" id="131" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
    </tr>
    <tr>
      <td>West World</td>
      <td>

        <input value="1" type="checkbox" id="132" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

        <input type="checkbox" checked data-toggle="toggle" id="133" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="134" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

        <input type="checkbox" checked data-toggle="toggle" id="135" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <td>
        <input value="1" type="checkbox" id="136" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

        <input type="checkbox" checked data-toggle="toggle" id="137" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
      </td>
      <tr>
        <td>Avatar</td>
        <td>
          <input value="1" type="checkbox" id="138" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

          <input type="checkbox" checked data-toggle="toggle" id="139" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="140" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

          <input type="checkbox" checked data-toggle="toggle" id="141" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="142" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">

          <input type="checkbox" checked data-toggle="toggle" id="143" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
      </tr>
      <tr>
        <th>DRAMA</th>
        <th>LIEZLE</th>
        <th>LEE</th>
        <th>GARETH</th>

      </tr>

      <tr>
        <th>MYSTERY / CRIME</th>
        <th>LIEZLE</th>
        <th>LEE</th>
        <th>GARETH</th>

      </tr>
      <tr>
        <td>Doll House</td>
        <td>
          <input value="1" type="checkbox" id="144" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="145" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="146" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="147" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="148" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="149" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
      </tr>
      <tr>
        <td>Ancient Aliens</td>
        <td>
          <input value="1" type="checkbox" id="150" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="151" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input type="checkbox" id="152" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="153" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="154" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="155" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
      </tr>
      <tr>
        <td>Wonder of the World</td>
        <td>
          <input value="1" type="checkbox" id="156" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="157" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="158" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="159" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
        <td>
          <input value="1" type="checkbox" id="160" checked data-toggle="toggle" data-on="<i class='fa fa-smile-o'></i>" data-off="<i class='fa fa-frown-o'></i>">
          <input type="checkbox" checked data-toggle="toggle" id="161" data-on="<i class='fa fa-play'></i>" data-off="<i class='fa fa-pause'></i>">
        </td>
      </tr>

  </table>

</div>

＆＃13;

Answer 1

好问题。我通过首先检查toggle元素是否具有类fa-circle-o然后检查是否使用条件（$(this).prop('checked')）检查元素来解决该问题。我从bootstrap toggle文档获得了后一种情况！

JSFiddle Demo

<强> JS：

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
  $checkboxes = $(".tables :checkbox");

$checkboxes.on("change", function() {
  var sum = 0;
  $checkboxes.each(function() {
    checkboxValues[this.id] = this.checked;
    if($(this).parent().find('.fa-smile-o').length > 0 && $(this).prop('checked')){
        sum += 1;
    }
  });
    $('#sum').html(sum);
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
  $("#" + key).bootstrapToggle();
});

var sum = 0;
  $checkboxes.each(function() {
    checkboxValues[this.id] = this.checked;
    if($(this).parent().find('.fa-smile-o').length > 0 && $(this).prop('checked')){
        sum += 1;
    }
  });
   console.log(sum);
    $('#sum').html(sum);

<强>参考文献：

Bootstrap toggle docs

将toggle Box的值添加到total

1 个答案: