代码之家 › 专栏 › 技术社区 › Daniac

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

checkboxlist arrays jquery javascript

2

Daniac · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

Snowmonkey 7 年前

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