Отображать ссылку только при нажатии нескольких флажков

Question

Я пытался заставить ссылку появляться только при нажатии нескольких флажков. Это для тестового сайта, который я создаю для своей работы, и я не могу понять это правильно. В основном, когда я задаю вопрос, для правильного ответа необходимо несколько ответов, поэтому я хочу включить систему, чтобы только при нажатии на все эти ответы появлялась ссылка на следующий вопрос. Мне нужно знать, что ставить в каждом коде флажков, чтобы я знал, как разместить неправильные ответы на сайте

Я пробовал код, который нашел здесь, предназначенный для одного флажка, и пробовал различныеметоды для умножения флажка, но я не могу заставить его показывать только тогда, когда установлены все флажки.

function toggleLink1(checkBox) {
  var link = document.getElementById("agreeLink");
  if (checkBox.checked)
    link.style.display = "inline";
  else
    link.style.display = "none";
}

<form>
  <p><input type="checkbox" id="agreeCheckbox" name="agreeCheckbox" value="agreeCheckbox" onchange="toggleLink(this);">By clicking this you agree that you are adding a subscription/recurring product to your order</p>
</form>

Это были базовые строки кода, которые я пытался изменить в соответствии с моими целями, но это не удалось

Я ожидал, что ссылка появится только тогда, когдавсе флажки используются, но они появляются после того, как щелкнул только один из них, а затем, если я щелкну другой флажок, используемый для тестирования, и сниму флажок с одного из них, ссылка снова исчезнет.

Answer 1

Попробуйте это

function check(e) {
  var tgt = e ? e.target : document.querySelectorAll("[name=agreeCheckbox]")[0];
  if (tgt.type === "checkbox") {
    var checks = document.querySelectorAll("[name=agreeCheckbox]").length,
      checked = document.querySelectorAll("[name=agreeCheckbox]:checked").length

    document.getElementById("sub").disabled = checked !== checks; // submit
    // or
    document.getElementById("next").style.display = (checked !== checks) ? "none" : "block"; // link
  }
}

window.addEventListener("load", function() {
  document.getElementById("consentForm").addEventListener("click", check)
  check()
})

<form id="consentForm">
  <p>
    <input type="checkbox" id="agreeCheckbox1" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order
  </p>
  <p>
    <input type="checkbox" id="agreeCheckbox2" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order
  </p>
  <p>
    <input type="checkbox" id="agreeCheckbox3" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order
  </p>
  <input type="submit" disabled id="sub" value="next" />
  <a href="next" id="next">Next</a>
</form>