Как передать несколько флажков с помощью 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

Из документации jquery для POST ( 3-й пример ):

$.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

Просто наткнулся на это, пытаясь найти решение той же проблемы. Реализуя решение Пола, я сделал несколько настроек, чтобы правильно выполнить эту функцию.

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

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

Короче говоря, добавление input: флажок в отличие от: флажок ограничивает поля ввода в массив только флажками в форме. Пол действительно прав, когда 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 вы пытаетесь повторить или напечатать свой пост, чтобы увидеть, что происходит внутри. Это должно выглядеть так. Будут возвращены только отмеченные вами флажки. Если вы не проверили ничего, он вернет ошибку.

<?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 / форма /

Он сделает это и многое другое для вас. Настоятельно рекомендуется.

Answer 6

У меня сработало следующее от Тарьяна,

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.

Answer 7

Это было бы лучше и проще

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

console.log(arr);