JavaScript open page based on value of checkboxes

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"/>

I am trying to use this code to allow a user to select check boxes from a web page, then open a new web page based on the value of the sum of the checkboxes. I am thinking that I should be using an if statement?

Answer 1

Using the switch, this could be easily done. Or create a lookup table with the key being the sum and the value being the URL. But here's the switch option.

$(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" />