如何使用 jQuery ajax post 传递多个复选框

Question

如何使用 jQuery ajax post 传递多个复选框

这是ajax函数

 function submit_form(){
 $.post("ajax.php", {
 selectedcheckboxes:user_ids,
 confirm:"true"
 },
 function(data){
  $("#lightbox").html(data);
  });
 }

这是我的表格

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

Answer 1

来自 POST (3rd example) 的 jquery 文档：

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

所以我会遍历选中的框并构建数组。类似的东西

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

Answer 2

刚刚遇到这个，试图找到解决同一问题的方法。为了实现 Paul 的解决方案，我进行了一些调整以使此功能正常运行。

var data = { 'venue[]' : []};

$("input:checked").each(function() {
   data['venue[]'].push($(this).val());
});

简而言之，添加 input:checked 而不是 :checked 将输入到数组中的字段限制为仅表单上的复选框。 Paul 确实是正确的，this 需要包含为 $(this)

Answer 3

可以使用以下内容，然后分解发布结果explode(",", $_POST['data']); 以给出结果数组。

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

Answer 4

这是一种更灵活的方式。

假设这是你的表单。

<form>
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

这是你下面的 jquery ajax...

                // Don't get confused at this portion right here
                // cuz "var data" will get all the values that the form
                // has submitted in the $_POST. It doesn't matter if you 
                // try to pass a text or password or select form element.
                // Remember that the "form" is not a name attribute
                // of the form, but the "form element" itself that submitted
                // the current post method
                var data = $("form").serialize(); 

                $.ajax({
                    url: "link/of/your/ajax.php", // link of your "whatever" php
                    type: "POST",
                    async: true,
                    cache: false,
                    data: data, // all data will be passed here
                    success: function(data){ 
                        alert(data) // The data that is echoed from the ajax.php
                    }
                });

在您的 ajax.php 中，您尝试回显或 print_r 您的帖子以查看其中发生了什么。这应该看起来像这样。只会返回您选中的复选框。如果您没有检查任何内容，它将返回错误。

<?php 
    print_r($_POST); // this will be echoed back to you upon success.
    echo "This one too, will be echoed back to you";

希望这足够清楚。

Answer 5

如果您不打算推出自己的解决方案，请查看这个 jQuery 插件：

malsup.com/jquery/form/

它会为您做到这一点，甚至更多。强烈推荐。

Answer 6

这样会更好更简单

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

console.log(arr);

Answer 7

Paul Tarjan 的以下内容为我工作，

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

但我有我的页面上有多个表单，它会从所有表单中提取复选框，因此我进行了以下修改，使其仅从一个表单中提取，

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

只需将 name_of_your_form 更改为您的表单名称。

我还会提到，如果用户不选中任何复选框，那么 PHP 中就不会设置数组。我需要知道用户是否取消选中所有框，所以我在表单中添加了以下内容，

<input style="display:none;" type="checkbox" name="user_ids[]" value="none" checked="checked"></input>

这样，如果没有选中任何框，它仍然会将数组设置为“none”。