If/Else 选中了两个复选框 - Javascript

Question

一个真正简单的 javascript 函数，我被困住了......（已经用谷歌搜索了很多，但无法让它完全工作！）。

基本上，我有两个复选框。我的免责声明消失了（仅当两个框都被选中时。（请参阅下面的完整代码）。

如果只选中一个/无框，则仍应显示免责声明。并且表单提交按钮被禁用。

一切正常。如果选中一个框，我可以使免责声明消失并停用按钮。但似乎什么也没做，下面是我的 if/else 语句。

基本上，我的 if/else 语句中的“if”没有检查正确的逻辑。

我用谷歌搜索并尝试了很多变化。但不能让这个工作。
谢谢！

  var formInput = document.querySelector("input[name=terms]");
  var marketingInput = document.querySelector("input[name=marketing]");
  var cvSubmitButton = document.querySelector("input[type=submit]");
  var checkBoxDiv = document.getElementById("checkboxRow");
  var scfSubmitButtonBorder = document.querySelector(".scfSubmitButtonBorder");

  cvSubmitButton.classList.add('disabled');
  scfSubmitButtonBorder.style.cursor = "not-allowed";

  var legalClause = document.createElement('div');
  legalClause.innerHTML = "<div id='disclaimer'><br /><p>* Your applicaton cannot be submitted, unless you have agreed to read our Terms of Use, Privacy Policy and Cookie Policy.</p></div>";
  checkBoxDiv.appendChild(legalClause);


  // EVENTLISTENER

    var boxes = document.querySelectorAll('input[type=checkbox]:checked').length;

    formInput.addEventListener("change", function(){

     if((formInput.checked) && (marketingInput.checked)) {

      cvSubmitButton.classList.remove('disabled');
      checkBoxDiv.removeChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "pointer";
      console.log('checked');
     } else {

      cvSubmitButton.classList.add('disabled');
      checkBoxDiv.appendChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "not-allowed";
      console.log('not checked');
     }
  });

这是 HTML 片段：

<div id="checkboxRow" class="scfSectionContent">
<input type="checkbox" name="terms" value="terms">  * I have read and agree with the <a href="/terms-of-user" target="_blank">Terms of Use</a>, <a href="/privacy-policy" target="_blank">Privacy Policy</a> and <a href="/cookie-policy" target="_blank">Cookie Policy</a>.
<br>
<input type="checkbox" name="marketing" value="marketing">  I agree that Adecco Group AG can use my details to send me information about their activities. This may be by post, email, SMS, MMS, phone, social media, push notifications in apps and other means. I understand that I may opt out at any time.
<div><div id="disclaimer"><br><p>* Your applicaton cannot be submitted, unless you have agreed to read our Terms of Use, Privacy Policy and Cookie Policy.</p></div></div></div>

Answer 1

感谢您的所有建议！通过向市场营销输入添加第二个事件侦听器，我设法让它工作。 （好地方海报！）。并定义 && 和 ||更清楚。

这是代码。谢谢！！！

  var formInput = document.querySelector("input[name=terms]");
  var marketingInput = document.querySelector("input[name=marketing]");
  var cvSubmitButton = document.querySelector("input[type=submit]");
  var checkBoxDiv = document.getElementById("checkboxRow");
  var scfSubmitButtonBorder = document.querySelector(".scfSubmitButtonBorder");

  cvSubmitButton.classList.add('disabled');
  scfSubmitButtonBorder.style.cursor = "not-allowed";

  var legalClause = document.createElement('div');
  legalClause.innerHTML = "<div id='disclaimer'><br /><p>* Your applicaton cannot be submitted, unless you have agreed to read our Terms of Use, Privacy Policy and Cookie Policy.</p></div>";
  checkBoxDiv.appendChild(legalClause);


  // EVENTLISTENER

  formInput.addEventListener("change", function(){

  if(formInput.checked && marketingInput.checked) {

    checkBoxDiv.removeChild(legalClause);
    scfSubmitButtonBorder.style.cursor = "pointer";
    cvSubmitButton.classList.remove('disabled');     
    console.log('forminput - both checked checked');


  } else {
      cvSubmitButton.classList.add('disabled');
      checkBoxDiv.appendChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "not-allowed";
      console.log('not checked');
  }
 });


marketingInput.addEventListener("change", function(){

  if(marketingInput.checked && formInput.checked) {

checkBoxDiv.removeChild(legalClause);
    scfSubmitButtonBorder.style.cursor = "pointer";
    cvSubmitButton.classList.remove('disabled');     
    console.log('marketinginput - both checked checked');


  } else {

      cvSubmitButton.classList.add('disabled');
      checkBoxDiv.appendChild(legalClause);
      scfSubmitButtonBorder.style.cursor = "not-allowed";
      console.log('not checked');
  }
});

Answer 2

好吧，您可能有两个带有名称术语的输入复选框：

  var formInput = document.querySelector("input[name=terms]");

但是您只访问一个并将事件侦听器添加到一个。 您应该使用 querySelectorAll，并将 eventListener 添加到每个复选框。

例如：

var a = document.querySelectorAll("input[name=terms]");

Array.from(a).forEach(item => {
  item.addEventListener("change", function() {
    console.log("Here");
  });
})