html - 将切换框的值添加到总计

标签 html css twitter-bootstrap togglebutton

我正在尝试将我的切换框的值添加到总和中并显示所选切换的总数(是或否)

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

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

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

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

  });

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

最佳答案

好问题。我通过首先检查切换元素是否具有类 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);

引用资料:

  1. > Bootstrap toggle docs

关于html - 将切换框的值添加到总计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46098971/

上一篇：javascript - 无法在html5 Canvas 上绘制文本

下一篇：javascript - 在页面加载之前使用 jQuery 定位图像

相关文章：

javascript - 如何使用 Javascript 将 JSON 响应下载到 Excel？

asp.net - 本地主机与开发服务器上 IE8 的奇怪显示行为

html - Bootstrap移动端断点展开nav

html - css 垂直对齐文本居中并 overflow hidden

jquery - 如何实现这样的悬停效果

javascript - 连续滚动视口(viewport)高度直到结束

twitter-bootstrap - Bootstrap Accordion : how to make entire button clickable?

java - 对象参数中可以填充的内容量的限制

html - 将我的 'form' 框 float 到 'top brown div' 中容器的右侧

javascript - Bootstrap 表过滤不起作用

©2024 IT工具网  联系我们