用户点击输入类型复选框

时间:2016-02-17 16:42:54

标签: javascript jquery if-statement

功能:

用户输入姓名和电子邮件以及可选的条件复选框。此复选框供用户检查是否高于18。

因此,如果用户选中该框以指示它们大于18,并且当用户单击提交时,该页面将导航用户到页面A.否则,如果用户没有选中该框,则页面将导航用户到页面乙

问题:

此时,我只知道我必须使用条件if...else语句来进行检查并允许正确的函数调用。但是,在用户单击提交按钮执行条件检查之后,我绝对会坚持如何从头开始。因此,我确实要求一些帮助让我开始。

由于

代码:



<div id="EmailPage" align="center" style="position:absolute; height: 1080px; width:1920px; background-repeat: no-repeat; display: none; z-index=7; top:0px; left:0px; ">

  <!--Email Buttons-->
  <table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
    <tr style="height: 1920;">
      <td width="1080">

        <input type="text" id="NameField" style="z-index=8; position:absolute; top:273px; left:779px; height:53px; width:511px; outline= 0; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent;">
        <input type="text" id="EmailField" style="z-index=8; position:absolute; top:342px; left:779px; height:53px; width:511px; outline=0; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent;">

        <input type="checkbox" id="AcknowledgeField" style="z-index=8; position:absolute; top:428px; left:776px; height:22px; width:24px; outline=0; border: 0; background: transparent;">

        <button id="Submit" onclick="Submit()">
        </button>
      </td>
    </tr>
  </table>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:3)

因为你已经包含了JQuery。这是你可以使用的东西。

<script>
$(document).ready(function(e) {
    $(document).on('click','#Submit', function(){
        /////test if check box is check
        if ($('#AcknowledgeField').is(':checked')){

               alert("About to go to pageA");

            window.location.href="../pageA.html";   
        } else {
            ///////cheeck box not checked///////////

               alert("About to go to pageA");

            window.location.href="../pageB.html";
        }
    })
});
</script>

答案 1 :(得分:1)

这是你用Jquery做的,如果你想用.NET做,那就不一样了。 https://jsfiddle.net/y3llowjack3t/5negy4qj/

和条件的另一种方式: https://jsfiddle.net/y3llowjack3t/5negy4qj/1/

<table align="center" cellspacing="0" cellpadding="0">
 <tr>
  <td width="100%">
    <input type="text" id="NameField">
    <input type="text" id="EmailField">
    <input type="checkbox" id="AcknowledgeField">

    <button id="Submit">
      Submit
    </button>
  </td>
 </tr>
</table>
$("#AcknowledgeField").click(function(){
    alert("Change this alert to go to page A");
});