Pass Checkbox-Werte in ein Array mit Ajax jsp

Question

ich eine Form wie die folgenden haben, ich brauche die Werte der Kontrollkästchen zu übergeben, die überprüft, ich weiß nicht, wie.

<input type="checkbox" id="invid" name="invid" value="100236"> 
<input type="checkbox" id="invid" name="invid" value="100852"> 
<input type="checkbox" id="invid" name="invid" value="100962"> 
<input type="checkbox" id="invid" name="invid" value="100965"> 
<input type="checkbox" id="invid" name="invid" value="101002"> 

<button id="submit">Submit</button> 

<script> 

$('#submit').click(function() { 

$.ajax({ 
    url: "collect.jsp", 
    type: "post", 
    data: Winvid: invid, 
    success: function(data) { 
    $('#response').html(data); 
    } 
}); 


}); 
</script> 

Answer 1

Verwendung .each, diese Demo Check Eigenschaft checked

$('#submit').click(function() { 
 
    var arrayValue = []; 
 
    // use name or class name 
 
    $('input[name=invid]').each(function(){ 
 
    if($(this).prop('checked')){ 
 
     arrayValue.push($(this).val()) 
 
    } 
 
    }); 
 

 
    console.log(arrayValue); 
 
    // arrayValue use in $.ajax 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="invid" value="100236"> 
 
<input type="checkbox" name="invid" value="100852"> 
 
<input type="checkbox" name="invid" value="100962"> 
 
<input type="checkbox" name="invid" value="100965"> 
 
<input type="checkbox" name="invid" value="101002"> 
 

 
<button id="submit">Submit</button>

Answer 2

erstens Ihre HTML ist ungültig, wie Sie die id Eigenschaft wiederholt haben, wenn sie eindeutig sein müssen. Verwenden Sie Klassen statt:

<input type="checkbox" class="invid" name="invid" value="100236"> 
<input type="checkbox" class="invid" name="invid" value="100852"> 
<input type="checkbox" class="invid" name="invid" value="100962"> 
<input type="checkbox" class="invid" name="invid" value="100965"> 
<input type="checkbox" class="invid" name="invid" value="101002"> 

Dann können Sie map() ein Array der ausgewählten Kontrollkästchen Werte erstellen. Dann können Sie ein Objekt in die data Eigenschaft der $.ajax() Methode die Daten in Ihrem Antrag zu übergeben. Versuchen Sie folgendes:

$('#submit').click(function() { 
    var checkedValues = $('.invid:checked').map(function() { 
     return this.value; 
    }).get(); 

    $.ajax({ 
     url: "collect.jsp", 
     type: "post", 
     data: { invid: checkedValues }, 
     success: function(data) { 
      $('#response').html(data); 
     } 
    }); 
}); 

Answer 3

Verwenden Kontrollkästchen als Array:

<input type="checkbox" name="invid[]" value="100236"> 
    <input type="checkbox" name="invid[]" value="100852"> 
    <input type="checkbox" name="invid[]" value="100962"> 
    <input type="checkbox" name="invid[]" value="100965"> 
    <input type="checkbox" name="invid[]" value="101002"> 

.serialize() gibt Ihnen eine Reihe von Form-codierten Daten.

ein Objekt, um Daten übergeben: jQuery wird bewirken, dass die Werte in der Form als Form kodierten Daten kodieren.

Da Sie bereits codiert, dass die Daten, die Sie nicht, es encodieren möchten. direkt

die Zeichenfolge übergeben.

data: $('.checkboxes:checked').serialize(),