チェックボックスのオプションが選択されていない場合、値をnoneにする方法は？

Question

私のコードは以下の通りです。ここでは配列を使用しています。オプションのどれも選択されていないときに "None"の値を出力しようとしていますが、フォームを送信するときに、いくつかのチェックボックスが選択されています。それでも「なし」と表示されます。 else if条件がなければ、オプションの1つを選択しないことを選択すると、結果には何も得られません。

入力機能に「なし」オプションを作成するはずがありません。

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>