通过jQuery ajax(）将多个复选框数据发送到PHP - Send multiple checkbox data to PHP via jQuery ajax()

我想通过jQuery的.ajax（）在我的网站上提交一个POST表单，该表单包含一个文本区域字段和一个输入字段（带有任意/可变数量复选框的type="checkbox"）。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:

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);

一切都很好：当表单提交时，一条新记录存储在我的数据库中，响应会被重定向回网页，但复选框数据不会发送。我想知道哪些复选框（如果有的话）被选中了。我读过.serialize（）、JSON等，但这些都不起作用。我必须在jQuery和PHP中序列化/JSON吗？怎样使用复选框发送表单数据时，一种方法比另一种方法好吗？我已经被这个问题困扰了两天了。如有任何帮助，我们将不胜感激。提前感谢！

是的，它与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);

您可以看到所有复选框值都已发送。我希望它能帮助你

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

您将复选框推送到错误的数组data['myCheckboxes[]']而不是myCheckboxes.push

看看这个。

<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']);

你也可以试试这个，

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

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

所以我只需要在复选框上进行迭代并构建数组。有点像。

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

目前的代码似乎还可以。使用此选项检查复选框数组包含的内容。将此代码添加到php脚本的顶部，查看复选框是否传递到脚本。

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