收集複選框值，並張貼在提交

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的，它打破（顯然是「submit3」 ）。當我print_r（$ _ POST）時，複選框POST正確，但濃縮隱藏變量不。 （它發佈，但一個空值）。複選框使用CI的黑客入侵的set_value（）函數（Derek需要在主幹中實現此功能，但這是另一個故事）正確保存。

我確定我是做一些錯誤的，容易指出的事情。在過去的2個小時裏，我只是一頭撞牆，嘗試各種功能，改變了大量的事情，並在Chrome開發工具中進行分析（不會顯示任何錯誤）。

幫助表示讚賞。 :)

Answer 1

我結束了使用PHP陣列，而不是jQuery的解決它：

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

我的名字改爲了數組並貼到我的劇本，我在那裏通過數組循環和處理它。仍然不確定基於jQuery的解決方案存在什麼問題，但我想我會在今後發佈這個供大家參考的。

Answer 2

在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> 

Answer 3

比方說，你的應用類，也許「tehAwesomeCheckboxen」每一個複選框。然後

<script> 

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

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

}); 

</script> 

編輯：

我不認爲是越來越填充$ _POST數組，因爲提交正在由JavaScript引擎在本地處理。 SO ...讓我們試試這個：

<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.這些誰upvoted，請注意我修改了我的答案。請確認您是否仍然覺得有用，並相應地調整您的投票。