如何檢查是否選中了另一個復選框並在添加條件的情況下再次執行該功能？

Question

所以我的任務是創建一個菜單，用戶可以在其中選擇四種面條、四種主菜和三種配菜。 雙方將成倍增加主菜的價格。 問題是，對於用戶檢查的每條面條，它將在總價中增加 50%。 因此，如果用戶支付 120 美元並選擇兩條面條，則為 180 美元。

我知道該復選框將調用兩個功能，但我不知道只有當有兩個或多個選中的復選框時它才能工作。 有人可以幫助或指導我如何實際執行此操作嗎？

小提琴

 function pmodel() { Model(); finalCost(); } function Model() { if (document.querySelector('input[name="NDLS"]:checked')) { document.getElementById("MMD").disabled = false; document.getElementById("ADDONS").disabled = false; } else { document.getElementById("MMD").disabled = true; document.getElementById("ADDONS").disabled = true; } } function total() { var selected1 = document.querySelector('input[name="MD"]:checked').value; var selected2 = document.querySelector('input[name="ADDONS"]:checked').value; //var totals = 0; totals = (selected1 * selected2); finalCost(totals); } function finalCost(totals) { //totals += (totals * document.querySelector('input[id="PMODEL"]').value); document.getElementById("amount").value = totals; }

 <fieldset id="MNDLS"> <legend>Noodles</legend> <input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Spaghetti</label><br> <input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Carbonara</label><br> <input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Lasagna</label><br> <input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Plain</label> </fieldset> <fieldset id="MMD" disabled> <legend>Main Dish</legend> <input type="radio" name="MD" value="50" onclick="total()"> <label>Chicken Wings ($50)</label><br> <input type="radio" name="MD" value="55" onclick="total()"> <label>Chicken Breast ($55)</label><br> <input type="radio" name="MD" value="60" onclick="total()"> <label>Pork Cutlets ($60)</label><br> <input type="radio" name="MD" value="65" onclick="total()"> <label>Steak($65)</label> </fieldset> <fieldset id="ADDONS" disabled> <legend>Sides</legend> <input type="radio" name="ADDONS" value="1" onclick="total()"> <label>Nothing (100%)</label><br> <input type="radio" name="ADDONS" value="1.5" onclick="total()"> <label>Softdrinks (150%)</label><br> <input type="radio" name="ADDONS" value="2" onclick="total()"> <label>Softdrinks and Fries (200%)</label> </fieldset> <br> <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>

Answer 1

首先不要多次使用相同的ID，它們應該是唯一的。

取而代之的是，您可以使用相同的類設置您的復選框（只是為了方便選擇），然后計算其中有多少被選中：

 function pmodel() { var count = 0; var list=document.getElementsByClassName("PNDLS"); for (var i = 0; i < list.length; ++i) { if(list[i].checked) { count++; } } console.log(count); }

 <fieldset id="MNDLS"> <legend>Noodles</legend> <input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Spaghetti</label><br> <input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Carbonara</label><br> <input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Lasagna</label><br> <input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()"> <label for="Model">Plain</label> </fieldset> <fieldset id="MMD" disabled> <legend>Main Dish</legend> <input type="radio" name="MD" value="50" onclick="total()"> <label>Chicken Wings ($50)</label><br> <input type="radio" name="MD" value="55" onclick="total()"> <label>Chicken Breast ($55)</label><br> <input type="radio" name="MD" value="60" onclick="total()"> <label>Pork Cutlets ($60)</label><br> <input type="radio" name="MD" value="65" onclick="total()"> <label>Steak($65)</label> </fieldset> <fieldset id="ADDONS" disabled> <legend>Sides</legend> <input type="radio" name="ADDONS" value="1" onclick="total()"> <label>Nothing (100%)</label><br> <input type="radio" name="ADDONS" value="1.5" onclick="total()"> <label>Softdrinks (150%)</label><br> <input type="radio" name="ADDONS" value="2" onclick="total()"> <label>Softdrinks and Fries (200%)</label> </fieldset> <br> <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>