jQuery Looping Checkboxen

Question

Ich habe eine Seite, die viele Checkboxen enthält. Es gibt eine Reihe von Kontrollkästchen, die eine ID mit dem Präfix pbfam_ haben, und nur diese interessiert mich.

Wenn ein Benutzer auf eine dieser klickt, muss ich eine Liste der IDs von dieser Untergruppe erhalten diejenigen, die überprüft werden, und ich brauche es eine Komma-getrennte Zeichenfolge der IDs.

Das HTML sieht wie folgt aus:

<input type="checkbox" id="pdfam_711131" /> 
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label> 
<br /> 
<input type="checkbox" id="pdfam_711341" /> 
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label> 
<br /> 

Es gibt etwa 40 dieser Kontrollkästchen. Was ich suche ist eine Zeichenfolge wie:

"pdfam_711131, pdfam_711341"

ich verschiedene Dinge ausprobiert habe und nichts gearbeitet hat. Ich bin ziemlich neu in jQuery. Dies gibt mir eine Liste der überprüften und gibt den überprüften Wert in einem Alarm zurück und ich habe versucht, mich damit herumzuschlagen, aber ich habe nichts erreicht.

$('input:checkbox[id^="pdfam_"]:checked').each(function(){alert($(this).attr("id"));); 

Answer 1

Ein einfacher Weg ist .map() zu verwenden, um ein Array der IDs zu machen, dann .toArray().join(", ") Ihre String zu erhalten verwenden.

var s = $('input:checkbox[id^="pdfam_"]:checked') 
 
    .map(function(i, el) { return el.id }) 
 
    .toArray() 
 
    .join(", "); 
 
    
 
console.log(s);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<input type="checkbox" checked id="pdfam_711131" /> 
 
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label> 
 
<br /> 
 
<input type="checkbox" checked id="pdfam_711341" /> 
 
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label> 
 
<br />

Answer 2

Anruf .get() ganz am Ende des resultierenden jQuery Objekt in eine wahre Array zu drehen.

var example = $('input:checkbox[id^="pdfam_"]:checked').map(function(i, e){ 
 
    return e.id; 
 
}).get(); // <---- 
 

 
console.log(example);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<input type="checkbox" checked id="pdfam_711131" /> 
 
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label> 
 
<br /> 
 
<input type="checkbox" checked id="pdfam_711341" /> 
 
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label>https://stackoverflow.com/posts/47717621/edit#

Answer 3

Sie alle, sind ausgewählt von Join .Der get() method von einem Map-Objekt ein bestimmtes Element zurückgibt, gefolgt erhalten.

console.log($('input:checkbox[id^="pdfam_"]:checked').map(function() { 
 
    return this.id || null; 
 
}).get().join(','))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" checked id="pdfam_711131" /> 
 
<label for="pdfam_711131" class="VIEWBOX">Temporary Staff</label> 
 
<br /> 
 
<input type="checkbox" checked id="pdfam_711341" /> 
 
<label for="pdfam_711341" class="VIEWBOX">Other Contractors</label> 
 
<br />