如何從HTML表單獲取多個複選框值

Question

我明白，我可以使用jQuery（how to get multiple checkbox value using jquery）來獲取複選框的值當有多個，但我的複選框，輸入是HTML表單裏面，所以那些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（布爾值）屬性，它會告訴你它是否被選中。