单击或取消选中复选框时，如何创建弹出的自定义窗口

How to create a custom window pop up when chekcbox is clicked or unchecked?

本文关键字：创建 窗口 自定义 何创建 取消 复选框 单击      更新时间：2023-09-26

我已经创建了当用户单击复选框时的弹出窗口。当单击复选框时，我会显示带有相关消息的弹出窗口，供用户确认是否真的要单击复选框。当复选框被选中并且用户想要取消选中时也是如此。如果用户真的想要取消选中复选框，我想显示带有相关消息的弹出窗口。

在几个步骤中，这是假设发生的

  1. 如果用户单击复选框，我想显示我的自定义弹出窗口，询问用户是否真的想选中它。如果用户单击"是"，我会选中复选框。否则，如果单击"取消"，则不选中复选框
  2. 如果用户想取消选中复选框，我还想显示我的自定义弹出窗口，询问用户是否真的想取消选中该复选框。如果单击"是"，请取消选中复选框。否则，如果单击"取消"，则保持选中复选框

这是我的代码

很抱歉，如果这是问题的重复。

$('#checkbox1').change(function() {
 if($(this).is(':checked')){
            console.log("CCCCheckeddddddd");
            if(confirm("Hello")){
            //enter code here i.e mark your checkbox as checked
    }
       }
        else
            {
                console.log("UNCheckeddddddd");
     if(confirm("Hello")){
            //enter code here i.e mark your checkbox as unhecked
    }
}    
    });

我已经通过更改js 的代码来解决问题

这就是我想出的

function CustomAlert() {
           debugger;
           this.render = function (dialog) {
               debugger;
               var winW = window.innerWidth;
               var winH = window.innerHeight;
               var dialogoverlay = document.getElementById('dialogoverlay');
               var dialogbox = document.getElementById('dialogbox');
               dialogoverlay.style.display = "block";
               dialogoverlay.style.height = winH + "px";
               dialogbox.style.left = (winW / 2) - (550 * .5) + "px";
               dialogbox.style.top = "100px";
               dialogbox.style.display = "block";
               document.getElementById('dialogboxhead').innerHTML = "Acknowledge This Message";
               document.getElementById('dialogboxbody').innerHTML = dialog;
               document.getElementById('dialogboxfoot').innerHTML = '<button >OK</button>';
           }
           this.ok = function () {
               debugger;
               document.getElementById('dialogbox').style.display = "none";
               document.getElementById('dialogoverlay').style.display = "none";
           }
       }
       var Alert = new CustomAlert();
       function CheckBoxConfirm() {
           this.render = function (dialog, op, id) {
               debugger;
               var winW = window.innerWidth;
               var winH = window.innerHeight;
               var dialogoverlay = document.getElementById('dialogoverlay');
               var dialogbox = document.getElementById('dialogbox');
               dialogoverlay.style.display = "block";
               dialogoverlay.style.height = winH + "px";
               dialogbox.style.left = (winW / 2) - (550 * .5) + "px";
               dialogbox.style.top = "100px";
               dialogbox.style.display = "block";
               if ($('#sync_payments').is(":checked"))
                   document.getElementById('dialogboxbody').innerHTML = 'Are you sure you want to enable all device use?';
               else
                   document.getElementById('dialogboxbody').innerHTML = ' Are you sure you want to disable all device use?';
               document.getElementById('dialogboxhead').innerHTML = "Confirm that action";
               //document.getElementById('dialogboxbody').innerHTML = dialog;
               document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Confirm.yes(''' + op + ''',''' + id + ''')">Yes</button> <button onclick="Confirm.no()">Cancel</button>';
           }
           this.no = function () {
               debugger;
               document.getElementById('dialogbox').style.display = "none";
               document.getElementById('dialogoverlay').style.display = "none";
               if ($('#sync_payments').is(":checked")) { // checked
                   $("#sync_payments").attr('checked', false);
               }
               else {
                   $("#sync_payments").attr('checked', true);
               }
           }
           this.yes = function (op, id) {
               debugger;
               document.getElementById('dialogbox').style.display = "none";
               document.getElementById('dialogoverlay').style.display = "none";
               if ($('#sync_payments').is(":checked")) { // checked
                   // leave as it is
               }
               else { // unchecked
                   $("#sync_payments").attr('checked', false);
               }
           }
       }
       var Confirm = new CheckBoxConfirm();

并将我的HTML复选框更改为：

<label for="sync_payments"><input type="checkbox" id="sync_payments" name="sync_payments" onclick="Confirm.render()"/> Enable for all devices </label>

我得到了我想要的输出。

onclick="Confirm.render(id)"上的Jay Star将其更改为该onclick="Confirm.render()"

在单击时，不要传递任何参数，只需调用confirm.render()。希望这对你有帮助。

相关文章：