jquery - jquery dynamic $ .post

Question

動的に生成されたチェックボックスのリストがあります。Exp：

<input class="cb1" var1="1" var2="2" var3="3" type="checkbox" /><label>Checkbox1</label>

チェックされているチェックボックスごとに、「var1」、「var2」、「var3」の値をphpファイル「data.php」に$.postしようとしています。

これを行う方法がわかりません。

Answer 1

すべてのフォーム要素をシリアル化したい場合は $('#form').serialize() を使用できますが、あなたの場合は $().find() 関数を使用して生成されたチェックボックスをスキャンし、 $.each を使用して見つかった各要素を繰り返す

チェックボックスが id='checkbox_conrainter' の div に残り、name 属性が 'checkbox[]' であると仮定します。

<div id="checkbox_container">
    <input name="checkbox[]" class="cb1" var1="1" var2="2" var3="3" type="checkbox" /><label>Checkbox1</label>
    <input name="checkbox[]" class="cb2" var1="1" var2="2" var3="3" type="checkbox" /><label>Checkbox2</label>
</div>

JavaScript セクションでは、次のように記述できます。

 var $postData = '';
 $('#checkbox_conrainter').find('input[type=checkbox]').each(function(){
    var $checkbox = $(this); //just for object caching
    if($checkbox).is(':checked')){
        var $checkbox_name = $checkbox.attr('name');
        var $checkbox_val1 = $checkbox.attr('val1'); //you can use loop if you want
        var $checkbox_val2 = $checkbox.attr('val2');
        var $checkbox_val3 = $checkbox.attr('val3');
    }
    $postData +='&'+$checkbox_name+'[val1]='+$checkbox_val1
               +'&'+$checkbox_name+'[val2]='+$checkbox_val2
               +'&'+$checkbox_name+'[val3]='+$checkbox_val3;
});
$.post('data.php',$postData);

あなたのphpページでは、変数の構造は次のようになります

$_POST = Array(
    checkbox[0] => Array(
        [val1] => 1 //val1 value,
        [val2] => 2 //val2 value,
        [val3] => 3 //val3 value
    ),
    checkbox[1] => Array(  //if you have more checkbox
        [val1] => 1 //val1 value,
        [val2] => 2 //val2 value,
        [val3] => 3 //val3 value
    ),
)

cmiiw

Answer 2

まず、idまたはnameプロパティを持つタグですべてのチェックボックスを囲みます。

次に、イベントまたはボタンのクリックで、次の値を入力できます。

  $(document).ready(function(){
             $("#input_form").submit(function(){
                 var querystring = $(this).serialize();
                   $.ajax({
                   type: 'POST',
                   url: url,
                   data: querystring,
                   success: success,
                         dataType: dataType
                     });
                 });
        });

PHPファイルでは、ループ内の値を取得してみてください

        foreach($_POST as $val){
             //TODO make a query string again for inserting in db etc
        }