通过jQuery ajax()将多个复选框数据发送到PHP

Question

我想通过jQuery的.ajax()提交一个包含文本区域和输入字段（类型为“checkbox”，带有任意/可变数量的复选框）的POST表单到我的网站。PHP接收文本区域数据并正确显示ajax响应给用户。但是，似乎PHP没有接收到复选框数据（它是否被选中）。我该如何使其工作？这是我拥有的代码：

HTML代码：

<form method="post" action="myurl.php" id=myForm>
    <textarea id="myField" type="text" name="myField"></textarea>
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
    ...(maybe some more checkboxes - dynamically generated as necessary)
    <input id="submit" type="submit" name="submit" value="Submit" onclick="submitForm()" />
</form>

jQuery是一个JavaScript库。

function submitForm() {
$(document).ready(function() {
$("form#myForm").submit(function() {

        var myCheckboxes = new Array();
        $("input:checked").each(function() {
           myCheckboxes.push($(this).val());
        });

        $.ajax({
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data: { myField:$("textarea[name=myField]").val(),
                    myCheckboxes:myCheckboxes },
            success: function(data){
                $('#myResponse').html(data)
            }
        });
        return false;
});
});

现在，PHP

$myField = htmlspecialchars( $_POST['myField'] ) );
if( isset( $_POST['myCheckboxes'] ) )
{
    for ( $i=0; $i < count( $_POST['myCheckboxes'] ); $i++ )
    {
        // do some stuff, save to database, etc.
    }
}
// create the response
$response = 'an HTML response';
$response = stripslashes($response);
echo($response);

一切都很顺利：当表单提交时，一个新的记录被存储在我的数据库中，响应已经通过ajax返回到网页，但是复选框数据没有被发送。我想知道哪些复选框已经被选中。我已经阅读了.serialize()、JSON等内容，但是这些都没有起作用。我需要在jQuery和PHP中进行序列化/JSON吗？如何操作？在使用复选框发送表单数据时，是否有一种更好的方法？我已经困扰了2天。非常感谢任何帮助！提前感谢！

- John Anderson

---

不用担心表单元素，试试这个：https://dev59.com/9WMk5IYBdhLWcg3wtgIR#19029778 - rohitcopyright

Answer 1

使用jquery.serialize()相当简单。

HTML

<form id="myform" class="myform" method="post" name="myform">
<textarea id="myField" type="text" name="myField"></textarea>
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
<input id="submit" type="submit" name="submit" value="Submit" onclick="return submitForm()" />
</form>
 <div id="myResponse"></div>

jQuery

function submitForm() {
var form = document.myform;

var dataString = $(form).serialize();


$.ajax({
    type:'POST',
    url:'myurl.php',
    data: dataString,
    success: function(data){
        $('#myResponse').html(data);


    }
});
return false;
}

现在是PHP，我导出POST数据

 echo var_export($_POST);

您可以看到所有复选框的值都被发送了。希望这能对您有所帮助。

- Winn Minn Soe

---

感谢@WinnMinnSoe让我发现了.serialize方法！=） - Lucas

Answer 2

var myCheckboxes = new Array();
$("input:checked").each(function() {
   data['myCheckboxes[]'].push($(this).val());
});

你把复选框推到了错误的数组 data['myCheckboxes[]']，而不是myCheckboxes.push

- TomaszSobczak

---

谢谢。我已经更改了代码，但是在 PHP 端仍然无法接收数据。我尝试了几种不同的使用 jQuery 处理复选框的方法（大多数想法都来自这个网站），但是它们都没有起作用。我的代码创建了一个 mySQL 数据库记录，但是复选框字段始终为空，即使我在发送的表单中勾选了多达 8 个不同的复选框。 - John Anderson

未捕获的引用错误：data未被定义。 - Andy

@Andy myCheckboxes.push($(this).val()); 我的复选框.push($(this).val()); - Damian

myCheckboxes = data['myCheckboxes[]'].push($(this).val()); 是最后一步。 - hakkikonu

Answer 3

看这个。

<script type="text/javascript">
    function submitForm() {
$(document).ready(function() {
$("form#myForm").submit(function() {

        var myCheckboxes = new Array();
        $("input:checked").each(function() {
           myCheckboxes.push($(this).val());
        });

        $.ajax({
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data: 'myField='+$("textarea[name=myField]").val()+'&myCheckboxes='+myCheckboxes,
            success: function(data){
                $('#myResponse').html(data)
            }
        });
        return false;
});
});
}
</script>

在myurl.php上，您可以使用print_r($_POST['myCheckboxes']);。

- Kamal Joshi

Answer 4

你也可以尝试这个，

var arr = $('input[name="myCheckboxes[]"]').map(function(){
  return $(this).val();
}).get();

console.log(arr);

- SagarPPanchal

Answer 5

    $.post("test.php", { 'choices[]': ["Jon", "Susan"] });

所以我只需要迭代选中的复选框并构建数组。类似于以下内容。

       var data = { 'user_ids[]' : []};
        $(":checked").each(function() {
       data['user_ids[]'].push($(this).val());
       });
        $.post("ajax.php", data);

- user3391228

Answer 6

目前您的代码似乎没问题。使用此代码查看复选框数组包含什么。将此代码添加到您的php脚本顶部，检查复选框是否被传递到您的脚本中。

echo '<pre>'.print_r($_POST['myCheckboxes'], true).'</pre>';
exit;

- Malitta N