jqueryの値がチェックボックスのループ内に投稿されていません

Question

私は、同じ名前とIDを持つ異なる値のチェックボックスを持っています。 ajaxリクエストに渡すためにチェックボックスをクリックしたときに値を取得しようとしています。今まで私は、あなたが上で数回同じIDを使用していないはず

function checkCheckboxState() { 

    if ($('.displayme').is(':checked')) { 

    //tried all of these... 

    //var id = $('.displayme').first().attr("value"); 
    //var id = $('.displayme').val(); 
    //var id = $(this).val(); 
     alert(id); 

    } 

     var id = $(":checkbox[name='displayme']:checked").val(); 
} 

<input type="checkbox" name="displayme" value="27" id="displayme" class="displayme" onclick="checkCheckboxState()"> 
<input type="checkbox" name="displayme" value="28" id="displayme" class="displayme" onclick="checkCheckboxState()"> 
<input type="checkbox" name="displayme" value="29" id="displayme" class="displayme" onclick="checkCheckboxState()"> 

Answer 1

（これはPHPのループに実際にある）それが唯一のリストの最初の値を返し、私は同じ結果を得るてみてください同じページ。

あなたは、チェックボックスの変化にイベントをバインドし、これで値を取得できます。

$("checkbox.displayme").on("change",function(){ 
    var checker = $(this).is(':checked'); 
    //your ajax code here 
}); 

そして、あなたのチェックボックスがPHPのループ上で生成されている場合、あなたは、ループのインデックスを使用することができます異なるIDを生成します（ただし、上記のコードではIDは必要ありません）。

Answer 2

最初の問題は、同じidの複数の要素があることです。彼らはユニークである必要があります。この場合、要素を識別するための共通のクラス名があるので、それらを削除することもできます。

実際の問題を解決するには、イベントハンドラ内のクリックされたチェックボックスへの参照を取得する必要があります。すでにjQueryを使用しているので、changeイベントハンドラを使用してjQueryを実行できます。またあなたは、単一のAJAXリクエストで渡すことができ、選択したすべてのチェックボックスの配列を構築するためにmap()を使用することができます

$(function() { 
 
    $('.displayme').change(function() { 
 
    if (this.checked) 
 
     console.log(this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="displayme" value="27" class="displayme"> 
 
<input type="checkbox" name="displayme" value="28" class="displayme"> 
 
<input type="checkbox" name="displayme" value="29" class="displayme">

：

$(function() { 
 
    $('.displayme').change(function() { 
 
    var values = $('.displayme:checked').map(function() { 
 
     return this.value; 
 
    }).get() 
 
    console.log(values); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="displayme" value="27" class="displayme"> 
 
<input type="checkbox" name="displayme" value="28" class="displayme"> 
 
<input type="checkbox" name="displayme" value="29" class="displayme">

これを試してみてください