將復選框值傳遞給php腳本頁面jquery

Question

我有以下代碼，它正在獲取選中的復選框的值並在單擊按鈕時提交數據。請查看代碼，並讓我在哪里我錯了。

$(document).ready(function() {
$(function(){
  $('#btnClick').click(function(){
    var val = [];
    $(':checkbox:checked').each(function(i){
      val[i] = $(this).val();
      $.ajax({
            url: 'server.php',
            type: "POST",
           data: ({val[i]}), ????
           success: function(data){

            }
        });


    });
  });
});
});

Answer 1

序列化更容易使用，它正是針對這種情況而設計的。

$(function(){
  $('#btnClick').click(function(){
   var val = $('input[type=checkbox]:checked').serialize();
   $.ajax({
        url: 'server.php',
        type: "POST",
        data: val,
        success: function(data){

        }
    });

   });
 });

另外，最好使用$(input[type=checkbox]:checked)作為選擇器，而不是$(':checkbox:checked') 。 從jQuery文檔中：

$（'：checkbox'）等同於$（'[type = checkbox]'）。 與其他偽類選擇器（以“：”開頭的選擇器）一樣，建議在其前面加上標簽名稱或其他選擇器。 否則， 隱含通用選擇器（“ ”）。 換句話說，裸露的$（'：checkbox'）等效於$（' ：checkbox'），因此應改用$（'input：checkbox'）。

因為：checkbox是jQuery擴展，而不是CSS規范的一部分，所以使用：checkbox的查詢不能利用本機DOM querySelectorAll（）方法提供的性能提升。 為了在現代瀏覽器中獲得更好的性能，請改用[type =“ checkbox”]。

Answer 2

• 將ajax函數保持在each循環之外。

• $(function(){})和$(document).ready(function(){})是相同的。 前者是簡寫形式。

   $(function(){ var val[], i=0; $('#btnClick').click(function(){ $('input:checkbox:checked').each(function(){ val[i] = $(this).val(); i++; }); $.ajax({ url: 'server.php', type: "POST", data: {'checked_values':val}, success: function(data){ // do something with returned data } }); }); }); 

在server.php頁面中

$checked = $_POST['checked_values']; // will contain an array with checked values
// proceed to do something with $checked array