htmlフォームから複数のチェックボックス値を取得する方法

Question

複数のチェックボックス入力がHTMLフォーム内にある場合、jQuery（how to get multiple checkbox value using jquery）を使用してチェックボックスの値を取得できることを理解しています。いずれもフォーム内からチェックボックスの値を取得しません。

私はフォームから値を抽出しようとしますが、チェックボックスの名前が値ではなく文書の中に現れる回数を数えるような奇妙な無線ノードリストを作成するだけです。

function validateForm() { 
 
    var checks = document.forms["TestForm"]["ParticipantSelection[]"]; 
 
    alert(checks); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
<form name="TestForm" action="Video1.php" method="post" onsubmit="return validateForm()"> 
 

 
    <table> 
 

 
    <tr> 
 
     <th><img name="<?php echo $valueindicator[0];?>" src="<?php echo $all_four_images[0];?>" height="100"> 
 
     </th> 
 

 
     <th><img name="<?php echo $valueindicator[1];?>" src="<?php echo $all_four_images[1];?>" height="100"> 
 
     </th> 
 
     <th><img name="<?php echo $valueindicator[2];?>" src="<?php echo $all_four_images[2];?>" height="100"> 
 
     </th> 
 
    </tr> 
 

 
    <tr> 
 
     <th> <input type="checkbox" name="ParticipantSelection[]" value="image1"> 
 
     </th> 
 

 
     <th><input type="checkbox" name="ParticipantSelection[]" value="image2"> 
 
     </th> 
 

 
     <th><input type="checkbox" name="ParticipantSelection[]" value="image3"> 
 
     </th> 
 
    </tr> 
 

 

 
    </table> 
 
    <input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"> 
 

 

 
    <button type="submit">Continue</button> 
 

 
</form>

しかし、私はどのようにの値を取得するには、JSを取得するには考えているいただきまし代わりに何か他のものを数えるのフォーム入力、および確認の値にアクセスする方法がないアイデア内部ボックス

Answer 1

あなたがそれぞれを反復処理するためにjqueryの.map()機能を使用することができますが、チェックボックスをチェックし、それが選択したチェック・ボックスのオブジェクトを返します、jQueryオブジェクトから配列を取得するために、我々はこのお試しください

を下回るよう.get()を使用することができます。

を

var validateForm = function(){ 
 
\t var checks = $('input[type="checkbox"]:checked').map(function(){ 
 
\t \t return $(this).val(); 
 
\t }).get() 
 
    console.log(checks); 
 
    return false; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name = "TestForm" action="Video1.php" method="post" onsubmit="return validateForm()"> 
 

 
<table> 
 

 

 
    <tr> 
 
     <th> <input type="checkbox" name="ParticipantSelection[]" value="image1"> 
 
     </th> 
 

 
     <th><input type="checkbox" name="ParticipantSelection[]" value="image2"> 
 
     </th> 
 

 
     <th><input type="checkbox" name="ParticipantSelection[]" value="image3"> 
 
     </th> 
 
    </tr> 
 

 

 
</table> 
 
<input type="hidden" name="AnswerCondition" value="BrowserCheckAnswer"> 
 

 

 
<button type="submit">Continue</button> 
 

 
</form>

Answer 2

checksは、その名前を持つすべての要素を表す配列のようなオブジェクトです。

配列のようにループします。各メンバーは、値を表すvalueプロパティと、チェックされているかどうかを示すchecked（ブール値）プロパティを持ちます。