Question

<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语句？

Answer 1

使用开关，可以轻松完成。或者创建一个查找表，其中键是sum，值是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" />

基于复选框值的JavaScript打开页面

1 个答案: