在jQuery UI对话框中显示复选框,并提供“取消”按钮

我试图解决一个非常常见的问题,并准备了一个简化的测试用例来展示它和我的努力.

我正在尝试显示几个jQuery UI对话框,每个对话框包含几个相同名称的复选框(下面我的测试代码中的水果和糖果)

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

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

更新按钮实际上是call DataTable’s fnDraw() function,该部分也已经在运行. (而且我不想在服务器之间保存复选框值,我想在客户端做所有事情 – 我知道,这是可能的).

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

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,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,'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,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');
}

并将其传递给关闭：恢复到对话框,然后保存按钮中断

解决方法

我对你的代码做了一些修改.可能最容易做的事情(不一定是最好的)是将状态保存在全局变量中. (更强大的解决方案可能只涉及将状态与对话框状态/选项一起保存).

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

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

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

以下是您为第1点(open：openDialog)所做的更改,以便不必直接调用openDialog.

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

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

这就是你的选择/取消选择看起来只应该在打开的对话框上的行为：

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

function deselect() {
    $(':checkBox',false);
}

这里是openDialog编辑使用它而不是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');
}

在jQuery UI对话框中显示复选框,并提供“取消”按钮

解决方法

猜你在找的jQuery相关文章