Question

我已经提到过这篇文章：

这个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的摘录：

<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开发工具中分析它（没有显示任何错误）。

帮助表示赞赏。：）

Answer 1

假设您在每个复选框中应用了一个类，可能是“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。那些赞成此事的人，请注意我已经修改了我的答案。请确认您是否仍然认为它有用并相应地调整您的投票。

Answer 2

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

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

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

Answer 3

你的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>

在jQuery中收集复选框值并在提交时将其POST

3 个答案: