如果未选择复选框中的任何一个，则如何将其设置为none？

Question

I've my code below and I'm using an array here. I'm trying to print "None" value when none of the options are selected, but instead when I submit the form I have a few checkboxes selected; it still says "None". Without the else if condition when I choose to not select one of the option, then I get nothing for the result.

I'm not supposed to create a "None" option for the input function.

 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

The problem is that you're replacing array with ["None"] every time there's an empty checkbox, not if all of the checkboxes are empty.

The simplest fix is to check after the loop if array is empty, eg:

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

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

Here it is in a working snippet:

 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>