web-dev-qa-db-ja.com

jQuery ajaxポストを使用して複数のチェックボックスを渡す方法

JQuery ajaxポストを使用して複数のチェックボックスを渡す方法

これは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>
javascriptjqueryhtmlajax
26
ahmed

POST（ 番目の例 ）のjqueryドキュメントから：

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

したがって、チェックボックスを反復処理して配列を作成します。何かのようなもの

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

同じ問題の解決策を見つけようとしてこれに出会いました。 Paulのソリューションの実装この機能を適切に機能させるために、いくつかの調整を行いました。

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

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

要するに、：checkedとは対照的にinput：checkedを追加すると、配列へのフィールド入力がフォーム上のチェックボックスのみに制限されます。 Paulは確かにthisが$(this)として囲まれる必要があるので正しい

16
simnom

以下を使用して、ポスト結果explode(",", $_POST['data']);を分解して、結果の配列を与えることができます。

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

これがより柔軟な方法です。

これがあなたのフォームだとしましょう。

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

それが十分に明確であることを願っています。

6
Adrian Fernando Alconera

独自のソリューションを導入しない場合は、このjQueryプラグインをご覧ください。

malsup.com/jquery/form/

それはあなたのためにそれ以上を行います。強くお勧めします。

2
Gabriel Hurley

ポール・タージャンからの以下は私のために働いた、

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

しかし、ページに複数のフォームがあり、すべてのフォームからチェックボックスを引き出したため、次の変更を加えて、1つのフォームからのみ引き出し、

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>

この方法では、ボックスがチェックされていない場合でも、配列に「なし」の値が設定されます。

1
Mike

これは良くて簡単だろう

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

console.log(arr);
1
SagarPPanchal