显示带有多个复选框的 jQuery UI 对话框答案

【问题标题】：Displaying jQuery UI dialog with multiple checkboxes显示带有多个复选框的 jQuery UI 对话框
【发布时间】：2011-09-29 12:28:42
【问题描述】：

我正在尝试显示多个复选框，然后将选定的复选框作为 HTTP GET（即作为 URL 字符串中的参数）提交到同一个脚本：

这是我的简化测试代码 - test.php：

<html>
<head>
<style type="text/css" title="currentStyle">
        @import "http://ajax.googleapis.com/ajax/libs/jqueryui/1/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() {
        $('#name').dialog({ autoOpen: false, modal: true });
});
</script>
</head>
<body>
<form>
<p><input type="button" value="Select name"
       onclick="$('#name').dialog('open');"></p>
<div id="name" title="name">

<?php

$NAMES = array(
        'project one',
        'project two',
        'project three',
);

foreach ($NAMES as $name) {
        printf('<p><label><input type="checkbox" name="name" value="%s">%s</label></p>',
                urlencode($name),
                htmlspecialchars(substr($name, 0, 120))
        );
}

?>

</div>
<input type="submit">
</form>
</body>
</html>

但由于某种原因，当我选择前 2 个复选框时，单击“提交”按钮（对于屏幕截图中的非英文名称，抱歉），然后脚本 http://myserver/test.php? 正在已提交而不是 http://myserver/test.php?name=project+one&name=project+two 如我所料。

如果我摆脱所有 JQuery UI 的东西，那么它就可以工作。

我做错了什么？（除了使用 name="name" 这是因为这是一个数据库表列名，而且似乎不是这个问题的原因）

更新：

在我的真实程序（不是上面的测试用例）中，我实际上有几个这样的对话框，并且想在每个对话框中设置一些设置，只有在点击之后提交按钮。所以提交按钮必须在对话框之外。

谢谢！

【问题讨论】：

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

【解决方案1】：

假设所有表单输入都是复选框，您可以使用以下内容来编译和提交详细信息作为 GET。

使用您的原始代码添加以下功能

function compileInputs(){
var string = '';
var inputs = new Array();

//loop through all checkboxes
$(':checkbox').each(function(){
    if($(this).is(':checked')){
        inputs.push($(this).attr('name')+"="+$(this).val());
    }
});

string = "?"+inputs.join("&");
window.location.replace(string);

}

您需要将输入的名称从 name='name' 更改为 name='name[]'

然后将提交更改为按钮如下：

<input type="button" onClick='compileInputs()' value='submit'>

您将不再需要 <form> 标签

对于更具选择性的方法：

//get all checkboxes from div#name
$('div#name :checkbox').each(function(){
    if($(this).is(':checked')){
        inputs.push($(this).attr('name')+"="+$(this).val());
    }
});

//get all checkboxes from div#appsversion
$('div#appsversion :checkbox').each(function(){
    if($(this).is(':checked')){
        inputs.push($(this).attr('name')+"="+$(this).val());
    }
});
//get all checkboxes from div#osversion
$('div#osversion :checkbox').each(function(){
    if($(this).is(':checked')){
        inputs.push($(this).attr('name')+"="+$(this).val());
    }
});

【讨论】：

这很好用，谢谢。我唯一的问题是，我有几个对话框：#name、#appsversion、#osversion。我想知道，如何以优雅的方式收集这些 div-tags 中的复选框......
那么上面的代码将编译页面上所有复选框的数据。如果您想为每个循环设置单独的循环，您可以更改循环输入的选择器。我已经添加到上面的解决方案中。
其实你是对的 - 它只适用于 2 个对话框，我刚刚尝试过
好的，如果你需要，我已经添加了一些代码来向你展示一种更具选择性的方法。
我最好也需要一个转义函数吗？

【解决方案2】：

您可能需要将整个表单包装在一个 div 中，然后在对话框中对话新的 div 而不仅仅是 div #name

【讨论】：

如果我将“提交”按钮放入 div 中，那么它将不可见
您应该使用 jquery ui 对话框的按钮属性，然后在按钮的回调中调用 $('form').submit() 来提交表单。在对话框之外有提交按钮是糟糕的 UI
我实际上想在我的真实程序中有几个这样的对话框 - 在那里执行一些设置，然后单击提交按钮。所以我必须在对话框之外有我的提交按钮。
我尝试在表单标签周围添加一对 div 标签 - 这没有帮助

【解决方案3】：

试试这个：

$("#submitButton").click(function(){
    $("#formId").submit();
});

【讨论】：

【解决方案4】：

你不应该做 name="name[]" 吗？然后在表单提交上（无论您提交它（AJAX 还是非 AJAX），您都可以将“name”数组作为您的 post 变量并按照您的意愿处理它。如果我错了，请纠正我

【讨论】：

【解决方案5】：

假设对话框确实是问题所在，您可能必须让对话框填充页面上的一些隐藏字段才能实际提交。

这是一个非常简单的示例，可帮助您入门。

http://jsfiddle.net/jUH9g/

当您在对话框中单击“确定”时，它会在实际提交的表单中填充“名称”文本框。在您的真实代码中，您可以将 input type="textbox" 更改为 input type="hidden"

$("#dlg").dialog({autoOpen: false,
              buttons: {
                  "OK": function () {
                      var names = "";
                      $("input:checkbox").each(function () {
                          if (this.checked) {
                              names += $(this).val() + ",";
                          }
                      });
                      $("#names").val(names);
                  }
              }
         });

【讨论】：

更新了一些细节的答案。