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

我有三個串列（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>

uj5u.com熱心網友回復：

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

直接的方法如下

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取消隱藏按鈕時，當一個為零時隱藏按鈕......

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">

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318476.html

標籤：javascript html 功能 dom事件添加事件监听器

上一篇：一次從每個類別中隨機洗掉一個資料點的R函式？

下一篇：洗掉mapStateToProps將給出undefined