Open a popup on check-box cheked

Question

1.00/5 (2 votes)

See more:

Hello,

I want to open a popup when a check-box is checked and when we close the popup check-box automatically unchecked and one more thing i want to add a save button in popup.

I am using following code. But it is not working.

$(document).ready(function () {
    var the_checkbox = $('#chkBoxHelp');
    the_checkbox.click(function () {
        if ($(this).is(':checked')) {
            $("#txtPopup").dialog({
                close: function () {
                    the_checkbox.prop('checked', false);
                }
            });
        } else {
            $("#txtPopup").dialog('close');
        }
    });
});

And the html is as below:

<input type="checkbox" id="chkBoxHelp"/>
<div id="txtPopup" style="display: none;">hello! It is a popup</div>

But I don't know why this is not work.

Posted 3-Mar-15 1:11am

Deepak Tiwari (D'pak)

Updated 3-Mar-15 5:30am

v4

Add a Solution

Comments

Thanks7872 3-Mar-15 7:24am

And your question is?

[no name] 3-Mar-15 7:43am

Where is checkbox?its on popup window ?

Deepak Tiwari (D'pak) 3-Mar-15 7:54am

check-box is in a div, not on popup.

[no name] 3-Mar-15 7:56am

chk my below code its working fine.ref this link : http://jsfiddle.net/dpauz/ and change the javascript in that site and put my below java script code.

[no name] 3-Mar-15 8:43am

r u chkd the below code??

Deepak Tiwari (D'pak) 3-Mar-15 12:17pm

yes, working fine.

Deepak Tiwari (D'pak) 3-Mar-15 12:19pm

I want to add one another button in this popup. I try many time but not success.

[no name] 3-Mar-15 23:07pm

its have cancel and ok button.

[no name] 3-Mar-15 23:23pm

Try this link : http://stackoverflow.com/questions/9091001/how-to-show-confirmation-alert-with-three-buttons-yes-no-and-cancel-as-it

Deepak Tiwari (D'pak) 3-Mar-15 11:32am

Thanks team.......

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

RajeeshMenoth · Answer 1 · 2015-03-03T01:48:00

Hi,

Ref: Popup window when checkbox checked in asp.net

Eg:

XML

<form id="CheckoutOptions" name="CheckoutOptions">
    <label class="inline">
        <input type="checkbox" id="Register" name="CheckoutOptions" value="Register">Register Account</label>
    <br>
    <label class="inline">
        <input type="checkbox" id="Guest" name="CheckoutOptions" value="Guest">Guest Checkout</label>
</form>

JavaScript

$("#Register").click(function (e) {
     if ($(this).is(':checked')) {
var m= confirm("your message");
        if(m !=true)
          {
              $(this).removeAttr('checked');
              e.preventDefault();
           }
     }

 });

Peter Leow · Answer 2 · 2015-03-03T03:27:00

You have to learn to read up the relevant documentation Dialog Widget[^].
I just did a quick reference and got this:

XML

<!DOCTYPE html>
<html>
   <head>
      <title>jQuery UI Dialog functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {

            var dialog1 = $("#dialog1");
            var checkbox1 = $("#checkbox1");

            dialog1.dialog({
               autoOpen: false,
               modal: true,
               buttons: {
                  Save: function() {$(this).dialog("close");}
               },
               title: "Title here",
               close : function() {checkbox1.prop('checked', false);}

            });

            checkbox1.click(function() {
               if (checkbox1.prop("checked")) {
                   dialog1.dialog("open");
               }
            });

         });
      </script>
   </head>
   <body>
      <div id="dialog1">Hello, my dialogue.</div>
      <input type="checkbox" id="checkbox1">Open Dialog...
   </body>
</html>

Open a popup on check-box cheked

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0