能否在myFunction()中添加多个if语句？附复选框计算需求

Absolutely! You can definitely include multiple if statements in myFunction() (or use a more flexible dynamic approach) to achieve your goal: calculating the product of each selected checkbox's value and the number from your textbox, then adding those products to your total. Let's break down two solutions for you:

Solution 1: Explicit multiple if statements (for fixed checkbox sets) #

This approach directly implements your request for individual if checks per checkbox. It's great if you have a static set of checkboxes that won't change often.

Updated JavaScript Code #

$(document).ready(function() {
  document.getElementById("demo").innerHTML = 0;
  $('label').click(function() {
    $('.option:checked').each(function() {
      $(this).parent().css('background', 'gold');
    });
    $('.option:not(:checked)').each(function() {
      $(this).parent().css('background', '#fff');
    });
    updateTotal();
  });
});

function myFunction() {
  // Parse input to number, default to 0 to avoid NaN
  var x = parseInt(document.getElementById("myNumber").value) || 0;
  var baseAmount = 0;
  
  // Your original tiered calculation logic
  if (x >= 5 && x <= 7) {
    baseAmount = 97 * x;
  } else if (x >= 8 && x <= 10) {
    baseAmount = 87 * x;
  } else if (x >= 11) {
    baseAmount = 82 * x;
  } else {
    baseAmount = 0;
  }
  document.getElementById("demo").innerHTML = baseAmount;
  
  updateTotal();
}

function updateTotal(){
  var x = parseInt(document.getElementById("myNumber").value) || 0;
  var total = 0;
  var baseAmount = parseInt(document.getElementById("demo").innerHTML) || 0;
  
  // Individual if checks for each checkbox
  if ($('#checkbox-name').is(':checked')) {
    total += 200 * x;
  }
  if ($('#checkbox-blah').is(':checked')) {
    total += 300 * x;
  }
  if ($('#checkbox-xyz').is(':checked')) {
    total += 400 * x;
  }
  if ($('#checkbox-something').is(':checked')) {
    total += 800 * x;
  }
  if ($('#checkbox-item').is(':checked')) {
    total += 1200 * x;
  }
  
  // Combine checkbox products with base amount
  var totalAmount = total + baseAmount;
  $('#total').html(totalAmount + ' $');
}

Corresponding HTML Tweaks (add IDs to checkboxes) #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="myNumber" onkeyup="myFunction()">
<p id="demo"></p>
<br>
<label><input type="checkbox" class="option" id="checkbox-name" value="200" /> Name</label><br />
<label><input type="checkbox" class="option" id="checkbox-blah" value="300" /> Blah</label><br />
<label><input type="checkbox" class="option" id="checkbox-xyz" value="400" /> XYZ</label><br />
<label><input type="checkbox" class="option" id="checkbox-something" value="800" /> Something</label><br />
<label><input type="checkbox" class="option" id="checkbox-item" value="1200" /> Item</label><br />
<br><br>
Total : <div id="total">0 $</div>
<br>

Solution 2: Dynamic checkbox iteration (recommended for scalability) #

If you might add more checkboxes later, this method avoids rewriting code. We'll loop through all selected checkboxes instead of writing individual if statements.

Updated JavaScript Code #

$(document).ready(function() {
  document.getElementById("demo").innerHTML = 0;
  $('label').click(function() {
    $('.option:checked').each(function() {
      $(this).parent().css('background', 'gold');
    });
    $('.option:not(:checked)').each(function() {
      $(this).parent().css('background', '#fff');
    });
    updateTotal();
  });
});

function myFunction() {
  var x = parseInt(document.getElementById("myNumber").value) || 0;
  var baseAmount = 0;
  
  if (x >= 5 && x <= 7) {
    baseAmount = 97 * x;
  } else if (x >= 8 && x <= 10) {
    baseAmount = 87 * x;
  } else if (x >= 11) {
    baseAmount = 82 * x;
  } else {
    baseAmount = 0;
  }
  document.getElementById("demo").innerHTML = baseAmount;
  
  updateTotal();
}

function updateTotal(){
  var x = parseInt(document.getElementById("myNumber").value) || 0;
  var total = 0;
  var baseAmount = parseInt(document.getElementById("demo").innerHTML) || 0;
  
  // Loop through all checked checkboxes and calculate products
  $('.option:checked').each(function() {
    var checkboxValue = parseInt($(this).val()) || 0;
    total += checkboxValue * x;
  });
  
  var totalAmount = total + baseAmount;
  $('#total').html(totalAmount + ' $');
}

No HTML changes needed here! #

This uses the existing value attribute on your checkboxes, so you can add new checkboxes anytime by just setting their value attribute—no code edits required.

Key Notes #

• Prevent NaN Errors: We use parseInt(...) || 0 to ensure empty or non-numeric inputs default to 0, avoiding broken calculations.
• Real-Time Updates: Both solutions trigger updateTotal() whenever the textbox changes or a checkbox is clicked, so your total stays current.
• Flexibility: Choose Solution 1 for explicit control over each checkbox, or Solution 2 for easier maintenance when adding new options.

内容的提问来源于stack exchange，提问作者Sheldon Cooper