在選中至少三個輸入復選框（每組六個中的一個）之前，如何隱藏按鈕？

Question

我有三個列表（HTML Fieldset 元素），每個列表有六種食物（HTML 輸入元素 - 從未選中狀態開始）。 我想在這三個列表下隱藏一個按鈕元素，直到檢查了三個列表中的每一個中的至少一種食物。 當每個列表中至少有一種食物被選中時，我希望按鈕取消隱藏。

當單擊第一個字段集中的一個輸入時，這將取消隱藏按鈕......但我需要擴展功能，以便該按鈕僅在 3x 字段集（蛋白質、碳水化合物和脂肪）中的至少一個時才會出現) 被選中。

 // Add variable for the DOM element button with id "generate-meals" let generateMealButton = document.getElementById("generate-meals"); generateMealButton.classList.add("hide"); // Add an eventlistener to generate meal button to listen for a "click" event and run the // function "runMealGenerator when the event occurs" generateMealButton.addEventListener("click", runMealGenerator); // find all input fields const proteinInputs = document.querySelectorAll("input[class='protein-input']"); console.log(proteinInputs[0].checked) const carbInputs = document.querySelectorAll("input[class='carb-input']"); console.log(carbInputs) const fatInputs = document.querySelectorAll("input[class='fat-input']"); console.log(fatInputs) // add click event-listener for all input buttons proteinInputs.forEach((input) => { input.addEventListener("click", checkProteinInput); }); // check if any input buttons are 'checked' function checkProteinInput() { // if the macroChoice button is 'not' hidden, then unhide it console.log(proteinInputs[0].checked) if (generateMealButton.classList.contains("hide")) { generateMealButton.classList.remove("hide"); } } function runMealGenerator() { console.log("Dummy Function Added") }

 <!-- This section contains the 3x menus of sample foods the user can select for inclusion in their meal plan ideas --> <section id="foodListContainer"> <!-- Small section for direction to the user - instructions on how to proceed --> <section class="food-groups" id="generator_instructions"> <h3 id="food-heading">Instructions</h3> <p>Please select at least one food from each group for inclusion in meal plans:</p> </section> <!-- Fieldset to contain checkboxes for each Protein food option for selection by user --> <fieldset class="food-groups" id="proteinFieldset"> <legend>Protein:</legend> <!-- Each Protein input is housed in a div to enable dematcation & styling --> <div> <label for="chicken">Chicken</label> <input class="protein-input" type="checkbox" id="chicken" name="chicken"> </div> <div> <label for="turkey">Turkey</label> <input class="protein-input" type="checkbox" id="turkey" name="turkey"> </div> <div> <label for="fish">Fish</label> <input class="protein-input" type="checkbox" id="fish" name="fish"> </div> <div> <label for="beef">beef</label> <input class="protein-input" type="checkbox" id="beef" name="beef"> </div> <div> <label for="eggs">eggs</label> <input class="protein-input" type="checkbox" id="eggs" name="eggs"> </div> <div> <label for="pork">pork</label> <input class="protein-input" type="checkbox" id="pork" name="pork"> </div> </fieldset> <!-- Fieldset to contain checkboxes for each Carbohydrate food option --> <fieldset class="food-groups"> <legend>Carbohydrate:</legend> <!-- Each Carbohydrate input is housed in a div to enable dematcation & styling --> <div> <label for="bread">Bread</label> <input class="carb-input" type="checkbox" id="bread" name="bread"> </div> <div> <label for="pasta">Pasta</label> <input class="carb-input" type="checkbox" id="pasta" name="pasta"> </div> <div> <label for="rice">Rice</label> <input class="carb-input" type="checkbox" id="rice" name="rice"> </div> <div> <label for="oats">Oats</label> <input class="carb-input" type="checkbox" id="oats" name="oats"> </div> <div> <label for="cereal">Cereal</label> <input class="carb-input" type="checkbox" id="cereal" name="cereal"> </div> <div> <label for="quinoa">Quinoa</label> <input class="carb-input" type="checkbox" id="quinoa" name="quinoa"> </div> </fieldset> <!-- Fieldset to contain checkboxes for each Fat food option --> <fieldset class="food-groups"> <legend>Fat:</legend> <!-- Each Fat input is housed in a div to enable dematcation & styling --> <div> <label for="butter">Butter</label> <input class="fat-input" type="checkbox" id="butter" name="butter"> </div> <div> <label for="cheese">Cheese</label> <input class="fat-input" type="checkbox" id="cheese" name="cheese"> </div> <div> <label for="cream">Cream</label> <input class="fat-input" type="checkbox" id="cream" name="cream"> </div> <div> <label for="nuts">Nuts</label> <input class="fat-input" type="checkbox" id="nuts" name="nuts"> </div> <div> <label for="bacon">Bacon</label> <input class="fat-input" type="checkbox" id="bacon" name="bacon"> </div> <div> <label for="olive-oil">Olive Oil</label> <input class="fat-input" type="checkbox" id="olive-oil" name="olive-oil"> </div> </fieldset> <!-- End of foodListContainer section --> <!-- Button to allow the user proceed to generate meal plan ideas when they have selected All foods they wish to include/exclude --> <section id="generate-container"> <button id="generate-meals">Generate A Meal Plan</button> </section> </section>

Answer 1

您將需要遍歷所有復選框，是否至少選中了每個部分中的一個。 而且，當未選中復選框時，您也需要這樣做，因為當條件不再滿足時，您可能想再次隱藏按鈕......

直接的方法如下

function checkInputs() {
  let p = false, f = false, c = false; //protein, carbon, fat
  for (let i = 0; i < proteinInputs.length; i++) {
    if (proteinInputs[i].checked) { p = true; break;} //we found at least one
  }
  for (let i = 0; i < fatInputs.length; i++) {
    if (fatInputs[i].checked) { f = true; break;} //we found at least one
  }
  for (let i = 0; i < carbonInputs.length; i++) {
    if (carbonInputs[i].checked) { c = true; break;} //we found at least one
  }

  if (p && f && c) {  //found at least one in each section
    //show the button
    generateMealButton.classList.remove("hide");
  } else {  //at least one is missing
    //hide the button
    generateMealButton.classList.add("hide");
  }
}

並將此checkInputs添加到所有復選框中（即不僅針對蛋白質，還針對脂肪和碳）

順便提一句。 你並不需要用顯式檢查classList.contains如果您正在使用classList.add或classList.remove 。 這些功能會處理這個問題。 即，如果它已經包含，它不會添加兩次相同的類，並且如果您嘗試刪除一個類，則不會出現錯誤，該類未包含在classList ）

當然你可以優化這段代碼。 例如，只需評估剛剛更改的復選框並為每個部分保留一個計數器。 當所有計數器> 0取消隱藏按鈕，並在 1 變為零時隱藏按鈕......

 let cb = document.querySelectorAll("input[type='checkbox']") for (let i = 0; i < cb.length; i++) cb[i].addEventListener("change", check); let c = 0, f= 0, p= 0 function check(event) { let addval = event.currentTarget.checked ? 1 : -1 switch(event.currentTarget.getAttribute("data-tag")) { case "f": f += addval; break; case "c": c += addval; break; case "p": p += addval; break; } console.log(f,c,p); if (f && c && p) document.getElementById("thebutton").classList.remove("hide") else document.getElementById("thebutton").classList.add("hide") }

 .hide { display: none; }

 <input type="checkbox" data-tag="f"/>fat <input type="checkbox" data-tag="c"/>carbon <input type="checkbox" data-tag="p"/>protein <input type="checkbox" data-tag="f"/>fat2 <input type="checkbox" data-tag="c"/>carbon2 <input type="checkbox" data-tag="p"/>protein2 <input id="thebutton" type="button" value="create meal" class="hide">