JavaScript 根据复选框的值打开页面答案

【问题标题】：JavaScript open page based on value of checkboxesJavaScript 根据复选框的值打开页面
【发布时间】：2018-01-05 18:34:12
【问题描述】：

<script type="text/javascript">
$(document).ready(function() {
function updateSum() {
  var total = 0;
  $(".sum:checked").each(function(i, n) {total += parseInt($(n).val());})
  $("#total").val(total);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
  updateSum();
})
</script>

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="extra-features">
  <div class="checkbox">
    <label> <input name="checkbox" class="sum" id="holidays" type="checkbox" data-toggle="checkbox" value="10"/> Hide Holidays</label>
  </div> 
  <br/>
  <div class="checkbox">
    <label> <input name="checkbox" class="sum" id="Governance" type="checkbox" data-toggle="checkbox" value="20"/>Hide Goverance</label>
  </div> 
  <br/>
  <div class="checkbox">
    <label> <input name="checkbox" class="sum" id="bclean" type="checkbox" data-toggle="checkbox" value="50&quot;/"/> Hide One Voice </label>
  </div> 
  <br/>
</section>
<input id="total" type="text"/>

我正在尝试使用此代码来允许用户从网页中选择复选框，然后根据复选框总和的值打开一个新网页。我在想我应该使用 if 语句吗？

【问题讨论】：

此代码仅计算选中复选框值的总和。你的问题到底是什么？通过这个工作代码，您可以有效地打开一个新网页。你试过了吗？
问题是有几个可能的总和取决于选中的复选框，我是否应该遍历可能的网页列表（使用 if 语句）直到总和等于分配的值到网页？
哈好吧...然后寻找switch()。
好的，让我看看 switch，谢谢

标签： javascript jquery arrays checkboxlist

【解决方案1】：

使用开关，这可以很容易地完成。或者创建一个查找表，其中键是总和，值是 URL。但这里是切换选项。

$(document).ready(function() {
  function updateSum() {
    var total = 0;
    $(".sum:checked").each(function(i, n) {
      total += parseInt($(n).val());
    })
    $("#total").val(total);
  }
  function triggerGo(value){
    switch(value) {

    case 10:
      console.log("We are at ten!");
      break;
    case 20:
      console.log("We are at twenty!");
      break;
    case 30:
      console.log("We are at thirty!");
      break;
    case 50:
      console.log("We are at fifty!");
      break;
    case 60:
      console.log("We are at sixty!");
      break;
    case 70:
      console.log("We are at seventy!");
      break;
    case 80:
      console.log("We are at eighty!");
      break;
    case 0:
    default:
      console.log("We are at zero!");
      break;
    
    }
  }  
  // run the update on every checkbox change and on startup

  
  $(".go-btn").on("click", function(){
    triggerGo(Number($("#total").val() ) );
  });
  
  $("input.sum").change(updateSum);
  updateSum();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="extra-features">
  <div class="checkbox">
    <label>
      <input name="checkbox" class="sum" id="holidays" type="checkbox" data- toggle="checkbox" value="10" /> Hide Holidays</label>
      <button class="go-btn">
      Go!
      </button>
  </div>
  <br/>
  <div class="checkbox">
    <label>
      <input name="checkbox" class="sum" id="Governance" type="checkbox" data-toggle="checkbox" value="20" />Hide Goverance</label>
  </div>
  <br/>
  <div class="checkbox">
    <label>
      <input name="checkbox" class="sum" id="bclean" type="checkbox" data-toggle="checkbox" value="50&quot;/" /> Hide One Voice </label>
  </div>
  <br/>
</section>
<input id="total" type="text" />

【讨论】：

很高兴我能帮上忙。 :)