Question

以下代码

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-col" id="login" style="width:300px">
  Subscribe to receive more interesting science experiments
  <p></p>
  Email  
  <input type="email" name="email" id="email">
  <p>I agree to the Terms and Conditions
    <input type="checkbox" />
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-grey">Sign Up</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
        <p>Thank you for signing up!</p>
        <p>We will deliver the monthly experiment on the 1st of every Month</p>
      </div>
    </div>
  </div>
</div>

所以我试图在复选框中添加IF语句，这样如果没有勾选，模态会出现错误框而不是确认

提前致谢

Answer 1

逻辑是，当用户点击按钮Sign Up时，您需要检查复选框（我标记为#agree）是否为checked。如果是，则显示模态。阅读代码，如果不清楚，请告诉我。

＆＃13;

function subscribe() {
  var cb = document.getElementById('agree');
  if (cb.checked) {
      document.getElementById('id01').style.display='block';
  }
  else {
    alert('please agree to the terms');  
  }
}

＆＃13;

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-col" id="login" style="width:300px">
  Subscribe to receive more interesting science experiments
  <p></p>
  Email  
  <input type="email" name="email" id="email">
  <p>I agree to the Terms and Conditions
    <input type="checkbox" id="agree" />
    <button onclick="subscribe()" class="w3-grey">Sign Up</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
        <p>Thank you for signing up!</p>
        <p>We will deliver the monthly experiment on the 1st of every Month</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

如果声明复选框模式

1 个答案: