当未为复选框选择选项时，如何使值无？答案

【问题标题】：When non of the options are selected for the checkboxes, how to make the value none?当未为复选框选择选项时，如何使值无？
【发布时间】：2017-02-16 17:55:11
【问题描述】：

我的代码在下面，我在这里使用了一个数组。当没有选择任何选项时，我试图打印“无”值，但是当我提交表单时，我选择了几个复选框；它仍然说“无”。当我选择不选择其中一个选项时，如果没有 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>

【问题讨论】：

标签： javascript html arrays if-statement checkbox

【解决方案1】：

问题在于，每次有一个空复选框时，您都将 array 替换为 ["None"]，而不是如果所有复选框都是空的。

最简单的解决方法是在循环之后检查array 是否为空，例如：

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

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

这是在一个工作的 sn-p 中：

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>

【讨论】：

我没想过要把它排除在循环之外。我认为这样做，它会成功的。非常感谢，感谢您的帮助:)。