多個復選框組值的多維數組jQuery帖子數組AJAX

Question

我有以下代碼。 我想將復選框值添加/刪除到數組並傳遞給JavaScript ajax調用。 我希望能夠將所有排序數組傳遞給ajax調用的數組。 每次更改復選框，它都會更新數組，而數組又應更新傳遞給ajax的數組。

<input class='sort1' type='checkbox' value='' name='sort1' />
<input class='sort1' type='checkbox' value='' name='sort1' />
<input class='sort1' type='checkbox' value='' name='sort1' />

<input class='sort2' type='checkbox' value='' name='sort2' />
<input class='sort2' type='checkbox' value='' name='sort2' />

<input class='sort3' type='checkbox' value='' name='sort3' />
<input class='sort3' type='checkbox' value='' name='sort3' />
<input class='sort3' type='checkbox' value='' name='sort3' />
<input class='sort3' type='checkbox' value='' name='sort3' />


var arr_sort = {}
var arr_sort1 = {};
var arr_sort2 = {};
var arr_sort3 = {};

    $(".sort1").delegate("input[type='checkbox']", 'change', function() {
        var $this = $(this);

        if ($this.prop('checked')) {
            arr_sort1[$this.attr('name')] = $this.val();
        } else {
            delete arr_sort1[$this.attr('name')];
        }

        ajax_call();

    });

$(".sort2").delegate("input[type='checkbox']", 'change', function() {
        var $this = $(this);

        if ($this.prop('checked')) {
            arr_sort2[$this.attr('name')] = $this.val();
        } else {
            delete arr_sort2[$this.attr('name')];
        }

        ajax_call();

    });

$(".sort3").delegate("input[type='checkbox']", 'change', function() {
        var $this = $(this);

        if ($this.prop('checked')) {
            arr_sort3[$this.attr('name')] = $this.val();
        } else {
            delete arr_sort3[$this.attr('name')];
        }

        ajax_call();

    });

function ajax_call(){

    $.ajax({
         type: 'POST',
         url: "file.php",
         data: { thisaction: thisaction, sort: arr_sort},
         success: function(data){ 
             $("#results").html(data);
            }
        }); 

}

我也許可以這樣做，但是我想將數組傳遞給php來處理，特別是如果添加了更多復選框組。

結果

array (
   "sort1" => array("1","2","3"),
   "sort2" => array("this","that"),
   "sort3" => array("other","ok")
)

or

array (
   "sort1" => array("1","2","3"),
   "sort2" => array("this")
   "sort3" => array()
)

Answer 1

答案： http ： //jsfiddle.net/morrison/XS48K/

筆記：

• 每個name都必須唯一。 無論如何，這是一個很好的形式。 我將它們命名為box＃，但您應該使用更恰當的名稱來描述它們的含義。
• 使用data屬性對對象進行分組。 這是執行此操作的語義方法。
• 您的input應為帶有id的form標簽。 這可以幫助您使用jQuery選擇器來獲取所需的對象。
• 我刪除了value屬性。 您可以根據需要重新輸入值。 我只是不想在其中看到value屬性。
• 您應該將它們全部存儲在一個對象或數組中。 這樣一來，您可以在一處管理所有已檢查狀態。