在 jQuery 中收集复选框值并在提交时发布它们答案

【问题标题】：Collect checkbox values in jQuery and POST them on submit在 jQuery 中收集复选框值并在提交时发布它们
【发布时间】：2011-08-19 18:31:14
【问题描述】：

我参考了这篇文章：

Post array of multiple checkbox values

还有这个 jQuery 论坛帖子：

http://forum.jquery.com/topic/checkbox-names-aggregate-as-array-in-a-hidden-input-value

我正在尝试使用 jQuery 在隐藏的输入字段中收集复选框值的数组（或用逗号连接的字符串，等等）。这是我正在使用的脚本代码：

<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
 var form = this;
 $(form).find("input[name=specialty]").val(function() {
  return $("input:checkbox",form).map(function() {
   return $(this).attr("name");
  }).get().join();
 });
});
</script>

相关 HTML 的 sn-p：

<form id="advancedSearchForm" name="advancedSearchForm" method="post" action="<?php echo site_url('/magcm/advancedSearch#results'); ?>">
<input type="checkbox" name="FCM" id="FCM" class="chk" value="FCM" <?php echo set_checkbox('FCM', 'FCM'); ?>/>
<input type="hidden" name="specialty" id="specialty" value="" />
<input class="button" name="submit3" id="submit3" type="submit" value="Search" />

我尝试在 jQuery 中将“submit”更改为“submit3”，但这会中断（显然）。当我 print_r($_POST) 时，复选框 POST 正确，但压缩的隐藏变量没有。（它发布，但一个空白值。）复选框使用 CI 的被黑 set_value() 函数正确保留（Derek 需要在主干中实现它......但这是另一回事）

我确定我在做一些错误且容易指出的事情。在过去的 2 个小时里，我一直在用头撞墙，尝试各种功能并更改大量内容并在 Chrome 开发工具中分析它（没有显示任何错误）。

感谢您的帮助。 :)

【问题讨论】：

"advancedSearchForm" 应为 "#advancedSearchForm" 以正确选择 ID 元素。
哎呀，这是代码中的错字。固定的。视图中其实是这样的，还是坏掉了。

标签： php jquery html arrays codeigniter

【解决方案1】：

你的 JavaScript 中有很多嵌套函数()，这让你很难理解你在做什么。

但是，您似乎只是将函数传递给 .val() 而不是实际值。试试这个：

<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
 var form = this;
 $(form).find("input[name=specialty]").val((function() {
  return $("input:checkbox",form).map(function() {
   return $(this).attr("name");
  }).get().join();
 })());
});
</script>

或者更好，先计算值：

<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
 var form = this;
 var value = $("input:checkbox",form).map(function() {
   return $(this).attr("name");
 }).get().join();
 $(form).find("input[name=specialty]").val(value);
});
</script>

【讨论】：

我用 advancedSearchForm 和 #advancedSearchForm 尝试了您的第二个示例，但没有成功。专业没有发布。
第一个有用吗？我还没有意识到您忘记了 $() 中的哈希值。

【解决方案2】：

假设您为每个复选框应用了一个类，可能是“tehAwesomeCheckboxen”。那么

<script>

$("#advancedSearchForm").submit(function() {

     var chkbxValues = $(".tehAwesomeCheckboxen").val();
     $("#specialty").val( chkbxValues.join(",") );

});

</script>

编辑：

我认为 $_POST 数组没有被填充，因为提交是由 JavaScript 引擎在本地处理的。所以...让我们试试这个：

<script>
    var chkbxValues = new Array();

    $(".tehAwesomeCheckboxen").live("change", function(e){
        var val = $(this).val();

        if( $(this).is(":checked") ) {
            if( chkbxValues.length == 0 || chkbxValues.indexOf(val) == -1){
                // Add the value 
                chkbxValues.push(val);
            }
        }
        else {
            // remove the value
            chkbxValues.splice( chkbxValues.indexOf(val), 1 );
        }

        $("#specialty").val( chkbxValues.join(",") );
    });

</script>

这会为复选框本身添加一个事件处理程序，以便选中/取消选中该框会更改隐藏元素。然后您的表单将正常处理其提交。

这是否更符合您的目标？

P.S. 那些赞成这个的人，请注意我已经修改了我的答案。请验证您是否仍然觉得它有用并相应地调整您的投票。

【讨论】：

仅供参考，您需要使用一些东西来查看生成的源代码，看看它是否在做任何事情。 Chrome 开发工具只显示服务器生成的 DOM。 Chrome 或 Firefox 的 Web 开发者工具栏都有这个选项。
我正在 print_r()'ing $_POST。如果数据已发布，我会看到它。我有用于 Chrome 的 WDT，它也没有显示任何内容。
请问您编写这段代码的目标是什么？您是否尝试构建一个聚合值以传递给 PHP 处理程序？
是的。我只需要发回一组复选框的所有值。异步调用不是必需的（也不需要）。我只需要一个输入来收集所有选中的复选框的名称并发布回控制器。
直到今天才搞定，但修改后的代码似乎不起作用。在 PHP 脚本中，我 print_r($_POST) 得到：Array ( [location] => [radiusSelect] => 10 [FCM] => FCM [PROV] => PROV [STU] => STU [specialty] => [submit3] => Search )PROV、FCM、STU 是复选框值，而特长是隐藏值。

【解决方案3】：

我最终使用 PHP 数组而不是 jQuery 来解决它：

<input type="checkbox" name="chk[]" id="RET" class="chk" value="RET" <?php echo set_checkbox('chk', 'RET'); ?>/>

我将名称更改为一个数组并将其发布到我的脚本中，在那里我循环遍历数组并在那里处理它。仍然不确定基于 jQuery 的解决方案有什么问题，但我想我会发布这个供大家参考。

【讨论】：