Question

一个真正简单的javascript函数我已经陷入困境了......（用google搜索了很多东西，无法让它完全正常工作！）。

基本上，我有两个复选框。我把我的免责声明消失了，（只有当两个盒子都经过检查时才会消失。（见下面的完整代码）。

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

一切正常。如果选中一个框，我可以使免责声明消失并取消激活该按钮。但似乎没有做任何事情，我的if / else声明如下。

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

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

  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 SNIPPET：

<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

感谢您的所有建议！我设法让它工作，通过向marketinginput添加第二个事件监听器。（很好看海报！）。定义＆amp;＆amp;和||更清楚。

这是代码。谢谢!!!

  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");
  });
})

如果/ Else选中了两个复选框 - Javascript

2 个答案: