选中或取消选中复选框时如何创建自定义窗口弹出窗口？

Question

我在用户单击复选框时创建了弹出窗口。单击复选框后，我会弹出相关消息，供用户确认是否确实要单击复选框。选中复选框并且用户想要取消选中它时相同。如果确实要取消选中该复选框，我想显示弹出的相关消息。

这几个步骤就是假设发生的事情

1. 如果用户单击该复选框，我想显示我的自定义弹出窗口，询问用户是否确实要检查它。如果用户单击是，我选中复选框。否则，如果他们点击取消保持复选框未选中。
2. 如果用户想要取消选中该复选框，我还想显示我的自定义弹出窗口，询问用户是否确实要取消选中该复选框。如果他们单击“是”，请取消选中该复选框。否则，如果他们点击取消保持复选框已选中。

Here is my CODE

对不起，如果这是问题的副本。

Answer 1

$('#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
    }

}    
    });

Answer 2

我通过改变我的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>

我得到了我想要的输出。

Answer 3

onclick="Confirm.render(id)"的Jay Star改变了这个onclick="Confirm.render()"

点击你不要传递任何参数只需要调用qazxsw poi。希望这会帮助你。