用户单击输入类型复选框时的条件检查

Conditional check when user clicks on input type checkbox

本文关键字：条件 检查 复选框 单击 输入 类型 用户      更新时间：2023-09-26

功能 ：

用户输入姓名和电子邮件以及可选的条件复选框。此复选框供用户检查它们是否高于 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>

既然你已经包含了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>

这就是你用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");
});
相关文章：