javascript - 当复选框未选中任何选项时，如何使值变为无？

Question

我的代码如下，我在这里使用一个数组。当未选择任何选项时，我试图打印“无”值，但当我提交表单时，我选择了几个复选框；它仍然说“无”。如果没有 else if 条件，当我选择不选择其中一个选项时，我将得不到任何结果。

我不应该为输入函数创建“无”选项。

function calculatePrice() {
  var array = [];
  var extras = document.calc.extras;

  for (count = 0; count < extras.length; count++) {
    if (extras[count].checked == true) {
      array.push(extras[count].value);
    } else if (!extras[count].checked) {
      array = ["None"];
    }
  }
  alert("(Including extras: " + array + ")");
}

<form name="calc">
  <table>
    <tr>
      <td colspan="40" id="col">
        <label for="extras">EXTRAS</label>
        <div class="left">
          <input type="checkbox" name="extras" id="ac" value="A/C">A/C (+$10)
          <input type="checkbox" name="extras" id="work" value="Working Brakes">Working Brakes (+$100)<br>
          <input type="checkbox" name="extras" id="cruise" value="Cruise Control">Cruise control (+$20)
          <input type="checkbox" name="extras" id="seat" value="Baby Seat">Baby Seat (+$30)<br>
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="40" id="col">
        <input type="submit" onClick="calculatePrice();" value="Estimate Cost">
      </td>
    </tr>
  </table>
</form>

Answer 1

问题是，每次出现空复选框时，您都会将 array 替换为 ["None"]，而不是如果 all复选框为空。

最简单的修复方法是在循环后检查array是否为空，例如:

for (count = 0; count < extras.length; count++) {
  if (extras[count].checked == true) {
    array.push(extras[count].value);
  }
}

if (array.length === 0) {
  array = ["None"];
}

这是一个工作片段:

function calculatePrice() {
  var array = [];
  var extras = document.calc.extras;

  for (count = 0; count < extras.length; count++) {
    if (extras[count].checked == true) {
      array.push(extras[count].value);
    }
  }

  if (array.length === 0) {
    array = ["None"];
  }

  alert("(Including extras: " + array + ")");
}

<form name="calc">
  <table>
    <tr>
      <td colspan="40" id="col">
        <label for="extras">EXTRAS</label>
        <div class="left">
          <input type="checkbox" name="extras" id="ac" value="A/C">A/C (+$10)
          <input type="checkbox" name="extras" id="work" value="Working Brakes">Working Brakes (+$100)<br>
          <input type="checkbox" name="extras" id="cruise" value="Cruise Control">Cruise control (+$20)
          <input type="checkbox" name="extras" id="seat" value="Baby Seat">Baby Seat (+$30)<br>
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="40" id="col">
        <input type="submit" onClick="calculatePrice();" value="Estimate Cost">
      </td>
    </tr>
  </table>
</form>