自定义警报与复选框- Javascript

Custom alert with Checkbox - Javascript

本文关键字：Javascript 复选框 自定义      更新时间：2023-09-26

我试图得到一个警报弹出，其中有一个复选框，用户需要检查，并单击提交继续。

我使用div标签来定义必须在警报上显示的警报消息，然后编写一些java脚本来返回值。

mydiv tag with alert message:

<div id="confirm_popup" style="color:red">
  <input type="checkbox" id="myCheckBox" /> Check in to confirm the following actions to take place and click OK
  <div style="margin-top: 15px; font-weight: bold; color:red; ">
    <p>* You will not be able to make additional changes to your current reporting period. It is very important to review your credits. </p>
    <p>* A new two-year reporting period tab will open. </p>
  </div>
</div>

javascript代码:

<script type="text/javascript">
  $('#close_record').submit(function() {
    var status = false
      $("#confirm_popup").html("Hi message!!!").dialog({
          modal: true,
          title: 'Alert Message', zIndex: 10000, autoOpen: true,
          width: 'auto', resizable: false,
          buttons: {
              Ok: function () {
                  $(this).dialog("close");
                  if ($('#myCheckBox').is(":checked")){
                    status = true
                  }
              },
          },
          close: function (event, ui) {
              $(this).remove();
          }
      });
    if(status == true){
      return true
    }
    else {
      false
    }
  })
</script>

close_record是我有提交按钮的表单的id。我使用表单提交动作来触发弹出的javascript。

但由于某种原因，这不起作用。我已经尝试了我能想到的所有可能的方法，但没有任何帮助。任何帮助都是感激的!

谢谢

您需要在对话框关闭后触发submit事件。

在OK函数中，你需要检测复选框，然后像这样做:

  $('#yourForm').trigger('submit');

避免异步方法中的变量，值不会是你需要的或你想的。

试试这个:

<form id="close_record">
    <input type="checkbox" style="display: none" id="myCheckBoxForm" />
    <input type="submit" value="go" />
</form>
<div id="confirm_popup" style="color:red">
    <input type="checkbox" id="myCheckBox" />Check in to confirm the following actions to take place and click OK
    <div style="margin-top: 15px; font-weight: bold; color:red; ">
        <p>* You will not be able to make additional changes to your current reporting period. It is very important to review your credits.</p>
        <p>* A new two-year reporting period tab will open.</p>
    </div>
</div>

和JS:

 $('#close_record').submit(function (e) {
      if ($('#myCheckBoxForm').is(":checked")) {
          return true;
      } else {
          e.preventDefault();
      }
      $("#confirm_popup").dialog({
          modal: true,
          title: 'Alert Message',
          zIndex: 10000,
          autoOpen: true,
          width: 'auto',
          resizable: false,
          buttons: {
              Ok: function () {
                  $(this).dialog("close");
                  $('#myCheckBoxForm').prop('checked', $('#myCheckBox').prop('checked'));
              },
          }
      });
  })
相关文章：