当复选框未选中选项时，如何设置值无？

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>