多个复选框组值的多维数组jQuery post array AJAX

时间:2011-09-06 01:12:42

标签: javascript jquery

我有以下代码。我想在数组中添加/删除复选框值并传递给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()
)

1 个答案:

答案 0 :(得分:0)

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

备注:

  • 每个name都必须是唯一的。无论如何,这是一个很好的形式。我将它们命名为box#,但你应该使用更合适的名称来描述它们是什么。
  • 使用data属性对对象进行分组。这是执行此操作的语义方式。
  • 您的input应位于带有form的{​​{1}}标记中。这有助于您使用jQuery选择器获取所需的对象。< / LI>
  • 我删除了id属性。如果您愿意,可以重新输入值。我只是不希望在那里看到value属性。
  • 您应将所有这些内容存储在一个对象或数组中。这样您就可以在一个地方管理所有已检查的状态。