Question

所以，我正在为一家休闲大麻零售商开展一个项目。它是一个启动页面促销网站（一个页面，使用jQuery淡入全屏视频），我几乎全部完成了。您转到该URL，系统会提示您输入＆＃34; ENTER＆＃34;只要你年纪大了。

此处的法律要求我们通过复选框验证进入网站的人员年龄为21岁以上，我已经完成了，但是现在我无法弄清楚如何在复选框要求后正确执行我的jQuery功能已经过验证。

这是我的HTML：

<div id="splash">
    <div class="checkbox-group required">
        <Br />
        <form>
            <input type="checkbox" name="age" id="age" required>  I am 21 
years of age or older<Br /><Br />
            <input type="checkbox" name="alien" id="alien" required>  I am not an alien
            <input type="image" src="img/enter.png" id="enter">
        </form>
    </div>
    <img src="img/ufo2.jpg">
</div>

我的JS：

    if(form.checkbox.checked) {
    $( "#enter" ).click(function() {
      $( "#splash" ).fadeOut( "slow" );
    });

    $( "#enter" ).click(function() {
      $( "#post-splash" ).fadeIn( "slow" );
    });
}

我觉得它与我的事件方法有关，但我还不熟悉JS还没有破解它。谢谢！

Answer 1

试试这个

$( "#enter" ).click(function() {
    var ageCheck = $('#age').is(':checked');
    var alienCheck = $('#alien').is(':checked');
    if(ageCheck == true && alienCheck == true){
        $( "#splash" ).fadeOut( "slow" );
        $( "#post-splash" ).fadeIn( "slow" );

    }
});

Answer 2

您需要收听点击事件以获取目标复选框：

$(document).ready(function() {

  $('#age').click(function() {

    // Clicking checkbox will make it checked,
    // so checkbox check code goes here

    $("#enter").click(function() {
      $("#splash").fadeOut("slow");
      $("#post-splash").fadeIn("slow");
    });

    // Code moved to above
    /*
    $("#enter").click(function() {
      $("#post-splash").fadeIn("slow");
    });
    */
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="splash">
  <div class="checkbox-group required">
    <Br />
    <form>
      <input type="checkbox" name="age" id="age" required> I am 21 years of age or older
      <Br />
      <Br />
      <input type="checkbox" name="alien" id="alien" required> I am not an alien
      <input type="image" src="img/enter.png" id="enter">
    </form>
  </div>
  <img src="img/ufo2.jpg">
</div>

启动页面复选框验证

2 个答案: