當複選框未選中選項時，如何設置值無？

Question

我的代碼如下，我在這裏使用了一個數組。我試圖在沒有選擇任何選項時打印「無」值，但是當我提交表單時，我選擇了一些複選框;它仍然會說「無」。如果沒有其他條件，當我選擇不選擇其中一個選項時，那麼我就不會得到任何結果。

我不應該爲輸入函數創建一個「無」選項。

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>