在 jQuery UI 对话框中显示复选框并提供取消按钮答案

【问题标题】：Display checkboxes in jQuery UI dialogs and provide Cancel button在 jQuery UI 对话框中显示复选框并提供取消按钮
【发布时间】：2011-11-30 16:07:08
【问题描述】：

我正在尝试解决一个可能很常见的问题，并准备了一个简化的测试用例来展示它和我的努力。

我正在尝试显示几个 jQuery UI 对话框，每个对话框都包含多个同名复选框（在下面的测试代码中，fruits 和 candy）

在每个对话框中我有 4 个按钮：保存、取消、全选和取消全选：

前 3 个按钮已经在我的代码中工作了。

更新按钮实际上是call DataTable's fnDraw() function，这部分也已经在工作了。（而且我不想将复选框值保存在服务器上，我想在客户端做所有事情 - 我知道，这是可能的）。

我的问题是为对话框实现 Cancel 按钮：

1) 我可能应该在对话框打开事件中保存当前设置的复选框列表？然后在取消点击时恢复它们？有一些优雅的 jQuery 方式吗？

2）我不知道，如何只处理当前打开的对话框的复选框。

以下是我当前的测试代码，它可以立即运行 - 感谢 Google CDN：

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function() { 
        var buttons = {
                Cancel: cancel,
                Save: save,
                'Deselect All': deselect,
                'Select All': select
        };

        $('#fruits').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons
        });

        $('#candy').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons
        });
});

function update() {
        var boxes = new Array();
        $(':checkbox').each(function() {
                if ($(this).is(':checked')) {
                        boxes.push(
                                $(this).attr('name') + 
                                '=' +
                                $(this).val() 
                        );
                }
        });

        alert('boxes: ' + boxes.join('&'));
}

function select() {
        $(':checkbox').prop('checked', true);
}

function deselect() {
        $(':checkbox').prop('checked', false);
}

function save() {
        // XXX how to implement?
        $(this).dialog('close');
}

function cancel() {
        // XXX how to implement?
        $(this).dialog('close');
}

</script>
</head>
<body>

<p><input type="button" value="Select fruits" onclick="$('#fruits').dialog('open');"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>

<p><input type="button" value="Select candy" onclick="$('#candy').dialog('open');"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>

<p><input type="button" onclick="update();" value="Update"></p>

</body>
</html>

更新：感谢 mootinator，以下代码正在运行，但我仍有 2 个小问题/问题：

1) 是否可以使用 open 事件来代替自定义的 openDialog() 方法？

2) 我的取消全选和全选按钮修改页面上的所有复选框 - 而不是只修改属于当前对话框的复选框。我想知道如何只选择后者？（不知何故在 selectAll() 和 deselectAll() 中使用 $(this)）？

我试过了

function selectAll() {
        $($(this) + ' :checkbox').prop('checked', true);
}

function deselectAll() {
        $($(this) + ' :checkbox').prop('checked', false);
}

但出现语法错误。

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "/css/demo_table_jui.css";
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/redmond/jquery-ui.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">

$(function() {
        var buttons = {
                Cancel: cancel,
                Save: save,
                'Deselect All': deselectAll,
                'Select All': selectAll
        };

        $('#openCandy').button();
        $('#openFruits').button();
        $('#update').button();

        $('#openCandy').click(function() {
                openDialog('#candy');
        });

        $('#openFruits').click(function() {
                openDialog('#fruits');
        });

        $('#fruits').dialog({
                autoOpen: false,
                modal:    true,
                buttons:  buttons
        });

        $('#candy').dialog({
                autoOpen: false,
                modal:    true,
                buttons:  buttons
        });
});

function update() {
        var boxes = new Array();
        $(':checkbox').each(function() {
                if ($(this).is(':checked')) {
                        boxes.push(
                                $(this).attr('name') +
                                '=' +
                                $(this).val()
                        );
                }
        });

        alert('boxes: ' + boxes.join('&'));
}

function selectAll() {
        $(':checkbox').prop('checked', true);
}

function deselectAll() {
        $(':checkbox').prop('checked', false);
}

function openDialog(sel) {
    $(sel).dialog('open');
    $(sel + ' :checkbox').each(function() {
        $(this).data('XXX', $(this).is(':checked'));
    });
}

function cancel() {
        $(this).find(':checkbox').each(function() {
            $(this).prop('checked', $(this).data('XXX'));
        });
        $(this).dialog('close');
}

function save() {
        $(this).dialog('close');
}

</script>
</head>
<body>

<p><input id="openFruits" type="button" value="Select fruits"></p>
<div id="fruits" title="fruits">
<p><label><input type="checkbox" name="fruits" value="apple">apple</label></p>
<p><label><input type="checkbox" name="fruits" value="banana">banana</label></p>
<p><label><input type="checkbox" name="fruits" value="pear">pear</label></p>
</div>

<p><input id="openCandy" type="button" value="Select candy"></p>
<div id="candy" title="candy">
<p><label><input type="checkbox" name="candy" value="toffee">toffee</label></p>
<p><label><input type="checkbox" name="candy" value="fudge">fudge</label></p>
</div>

<p><input id="update" type="button" onclick="update();" value="Update"></p>

</body>
</html>

UPDATE2：实际上我有第三个和更大的问题：对话框右上角的关闭 X 按钮无法正常工作（它保存而不是取消）。

我尝试将 close:cancel, 添加到两个对话框，但在 Chrome 中出现运行时错误：

Uncaught RangeError: Maximum call stack size exceeded
f.event.remove
f.event.remove
f.fn.extend.unbind
a.extend.destroy
a.extend.destroy
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
e.extend.each
e.fn.e.each
a.widget.bridge.a.fn.(anonymous function)
cancel
a.Widget._trigger
a.widget.close
a.widget.bridge.a.fn.(anonymous function)
.....etc....

UPDATE3：可能是因为我循环调用了$(this).dialog('close')？

我没有看到一个简单的方法来解决它：如果我创建一个单独的函数

function restore() {
        $(this).find(':checkbox').each(function() {
            $(this).prop('checked', $(this).data('XXX'));
        });
}

function cancel() {
        restore();
        $(this).dialog('close');
}

并将其作为 close: restore 传递给对话框，然后 Save 按钮中断

【问题讨论】：

标签： jquery jquery-ui jquery-selectors jquery-ui-dialog checkbox

【解决方案1】：

我对您的代码进行了一些修改。可能最简单的事情（不一定是最好的）是将状态保存在全局变量中。（更强大的解决方案可能只涉及将状态与对话框状态/选项一起保存）。

更新：清理了将复选框本身的初始状态存储在 DOM 中而不是全局变量中的解决方案。

http://jsfiddle.net/rhdNH/8/

我添加了一个自定义打开功能，方便保存状态，并完成了取消功能。您可能还想在使用removeProp 关闭时清理“原始”属性，但这不是绝对必要的。

以下是您将对第 1 点 (open:openDialog) 进行的更改，以便不必直接调用 openDialog。

$('#fruits').dialog({ 
    autoOpen: false, 
    modal: true,
    buttons: buttons,
    open: openDialog
});

$('#candy').dialog({ 
    autoOpen: false, 
    modal: true,
    buttons: buttons,
    open: openDialog
});

这就是你的选择/取消选择应该只对打开的对话框起作用：

function select() {
    $(':checkbox', this).prop('checked', true);
}

function deselect() {
    $(':checkbox', this).prop('checked', false);
}

这里将openDialog 编辑为使用this 而不是jQuery 选择器：

function openDialog() {
    $(':checkbox', this).each(function() {
        $(this).prop('original', $(this).is(':checked'));
    });
}

function cancel() {
        $(this).find('input[type="checkbox"]').each(function() {
            $(this).prop('checked', $(this).prop('original'));
        });
        $(this).dialog('close');
}

【讨论】：

谢谢。所以你在复选框本身中将复选框状态保存为 original="true" ？为什么是“原创”，是任意的名字吗？
只是另一个注意事项，您可以使用.data 而不是.prop 以更标准：stackoverflow.com/questions/432174/… -- 虽然在任意属性中存储简单布尔值，但您不应该遇到内存泄漏要么。
谢谢你，有你的帮助我快到了，但请看看我更新的问题。
第二点：$(':checkbox', this).prop('checked', true);。我再看看另一个。
是的。更新了我的答案。您可以通过移除 x 按钮来处理它。 stackoverflow.com/questions/896777/…

【解决方案2】：

在您的保存功能中，您应该调用服务器端脚本（使用 AJAX - 检查 jQuery 文档here）并保存每个复选框的状态（当然，如果您愿意这样做）
在取消功能中，我只是坚持关闭对话框，因为您不需要更改任何内容。回滚保存所做的更改是没有意义的，因为您始终可以选中/取消选中所需的复选框并再次保存它们。
如何仅处理当前打开的对话框的复选框 - 为 div 容器分配唯一的 id 并使用 $('#div_id input[type="checkbox"]') 选择器

【讨论】：

抱歉，您的建议 1. 和 2. 不适合我 - 因为我不想通过服务器。我想在客户端使用（并保存）复选框信息，这已经有效 - 请参阅我当前问题中的 DataTables 问题链接。