如何使用jQuery在HTML复选框选中时打开对话框？

Question

我希望当html复选框被选中时，弹出一个jQuery对话框。我正在使用以下代码。但它不起作用。

$(document).ready(function () {
        $('#chkBoxHelp').click(function () {
            if ($(this).is(':checked')) {
                $("#txtAge").dialog();
            }
        });
    });

以下是HTML代码：

<input type="checkbox" id="chkBoxHelp"/>
<div id="txtAge" style="display: none;">Age is something</div>

请帮助我。

另外，当弹出窗口关闭时，我想要取消复选框的选中状态。复选框位于jQuery弹出框中。我需要在选中复选框时打开另一个弹出窗口。

提前致谢。

- Temp Expt

---

请看这里 -> http://jsfiddle.net/x4CM3/1/ - adeneo

嗨，Adeneo，感谢您的回复。在asp页面中它运行良好。我忘了提到复选框位于jQuery弹出窗口中。我需要在复选框选中时打开另一个弹出窗口。我还更新了问题。请帮忙。 - Temp Expt

Answer 1

您可以使用 open 和 close 方法以及 close 事件。

代码：

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

Demo: http://jsfiddle.net/IrvinDominin/V9zMx/

- Irvin Dominin

---

嗨，感谢您的回复。在ASP页面中它运行良好。我忘了提到复选框位于jQuery弹出窗口中。我需要在复选框选中时打开另一个弹出窗口。我还更新了问题。请帮忙。 - Temp Expt

@TempExpt 所以你需要同时打开弹出窗口吗？有什么是模态框吗？ - Irvin Dominin

非常感谢。非常感谢。它运行良好。我将其标记为已解决。 - Temp Expt

Answer 2

尝试这个方法，如果再次点击复选框，则关闭。

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

示例 在这里

- Sergio

---

嗨，感谢您的回复。在ASP页面中它运行良好。我忘了提到复选框位于jQuery弹出窗口中。我需要在复选框被选中时打开另一个弹出窗口。我也更新了问题。请帮忙。 - Temp Expt

@TempExpt，你的意思是说有时会同时打开两个对话框？ - Sergio

当我点击一个按钮时，一个div弹出作为弹出窗口。这个div包含一个复选框。现在我想要在复选框选中时弹出另一个弹出窗口。 - Temp Expt

@TempExpt，你的意思是关闭对话框并打开一个新的吗？ - Sergio

没有。当我关闭第二个对话框时，第一个对话框中的复选框将取消选中状态。我从下面的Irvin那里得到了解决方案。谢谢。 - Temp Expt