php - 在 jQuery 中收集复选框值并在提交时将其发布

Question

我引用过这篇文章:

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 片段:

<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 的 hack 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.那些对此投赞成票的人，请注意我已经修改了我的答案。请验证您是否仍然觉得它有用并相应地调整您的投票。