jQuery使用Ajax将多个Checkbox值传递给PHP

时间:2017-03-03 13:25:59

标签: javascript php jquery html ajax

我有jQuery来获取多个复选框值。

您可以参考演示here

该jQuery的功能没问题,当我们勾选复选框时,我们可以看到在btnUpdate点击后基于data-id选择的内容。

但现在我想通过Ajax使用PHP传递并存储到数据库。 示例输出,

1 -> read
1 -> update
2 -> update

然后将其保存到表格中的数据库:

ID | chkStatus
1  | read
1  | update
2  | update

这是HTML

<table>
<tr>
  <th>Nama</th>
  <th>Create</th>
  <th>Read</th>
  <th>Update</th>
  <th>Delete</th>
</tr>
<tr>
  <td>coba</td>
  <td><input type="checkbox" data-id="1" data-tipe="create"></td>
  <td><input type="checkbox" data-id="1" data-tipe="read"></td>
  <td><input type="checkbox" data-id="1" data-tipe="update"></td>
  <td><input type="checkbox" data-id="1" data-tipe="delete"></td>
</tr>
<tr>
  <td>coba 2</td>
  <td><input type="checkbox" data-id="2" data-tipe="create"></td>
  <td><input type="checkbox" data-id="2" data-tipe="read"></td>
  <td><input type="checkbox" data-id="2" data-tipe="update"></td>
  <td><input type="checkbox" data-id="2" data-tipe="delete"></td>
</tr>
<tr>
  <td><input type="button" id="btnUpdate" value="Update"/>
</tr>

  

的jQuery

$(function(){
  $('#btnUpdate').click(function(){
    var cb = [];
    $.each($('input[type=checkbox]:checked'), function(){
      cb.push($(this).data('id') + ' -> ' +$(this).data('tipe'));
    });
    $('#status').val(cb.join("\n"));
  })
});

1 个答案:

答案 0 :(得分:1)

您可以通过get或post发送阵列服务器端,在这种情况下,我建议您修改构建阵列的方式:

$(function(){
    $('#btnUpdate').click(function(){
        var cb = [],
            post_cb = []

        $.each($('input[type=checkbox]:checked'), function(){
            var id = $(this).data('id'),
                tipe = $(this).data('tipe')

            cb.push(id + ' -> ' + tipe);
            post_cb.push({
                'id': id,
                'tipe': tipe
            });
        });
        $('#status').val(cb.join("\n"));

        $.ajax({
            'type': 'post',
            'url': '/path/to/script.php',
            'data': {
                'cb': post_cb
            },
            'success': function(response) {
                // Do something
            },
            'error': function(response) {
                // Do something
            }
        });
    })
});

然后在你的PHP文件中:

<?php

print_r($_POST['cb']);
/*

Array
(
    [0] => Array
        (
            [id] => 1
            [tipe] => read
        )

    [1] => Array
        (
            [id] => 1
            [tipe] => update
        )

    [2] => Array
        (
            [id] => 2
            [tipe] => update
        )

)

*/

?>