CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Jay Star
Jay Star

Reputation: 188

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

I have create the pop window when user click check-box. When the check box is clicked, I display the pop up with relevant message for user to confirm if the really want to click the check box. Same when the check box is checked and user want to uncheck it. I want to display the pop up with relevant message if the really want to uncheck the checkbox.

In few steps this what suppose to happen

  1. If user clicks the checkbox, i want to show my custom pop up to ask user if they really want to check it. If user click YES, I check the checkbox. Else if they click CANCEL keep checkbox unchecked.
  2. If user want to uncheck the checkbox, I want to also show my custom pop up to ask user if they really want to uncheck the checkbox. If they click YES uncheck the checkbox. Else if they click CANCEL keep checkbox checked.

Here is my CODE

Sorry if this is a duplicate of asked question.

Upvotes: 1

Views: 142

Answers (3)

King
King

Reputation: 234

Jay Star on the onclick="Confirm.render(id)" change that to this onclick="Confirm.render()"

On you onclick dont pass any parameter just call confirm.render(). Hope this will help you.

Upvotes: 0

Jay Star
Jay Star

Reputation: 188

I have figured my problem by changing the code of my js

This is what i came up with

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();

And changed my HTML checkbox to this :

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

And I got the output I was looking for.

Upvotes: 1

Shantanu Madane
Shantanu Madane

Reputation: 615

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

}    
    });

Upvotes: 1

Related Questions