如果未選擇復選框中的任何一個，則如何將其設置為none？

Question

我下面有我的代碼，我在這里使用數組。 當沒有選擇任何選項時，我嘗試打印“ None”值，但是當我提交表單時，我選擇了幾個復選框。 它仍然顯示“無”。 當我選擇不選擇一個選項時，如果沒有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

問題是，每當有一個空復選框時，您都用["None"]替換array ，而不是如果所有復選框都為空。

最簡單的解決方法是在循環之后檢查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>