Utilizzo di jQuery per ottenere il valore di più caselle di controllo e output come Stringa separata da virgole.

Question

Ho molti checkboxs come sotto,

<li><input type="checkbox" name="areaofinterest" value="home_coo" id="home_coo" class="Checkbox" > Cooking</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_cra" id="home_cra" class="Checkbox"> Crafts</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_dec" id="home_dec" class="Checkbox"> Decorating</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_ent" id="home_ent" class="Checkbox"> Entertaining</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_gar" id="home_gar" class="Checkbox"> Gardening</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_hom" id="home_hom" class="Checkbox"> Home Improvement</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_mar" id="home_mar" class="Checkbox"> Marriage</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_par" id="home_par" class="Checkbox"> Parenting</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_pet" id="home_pet" class="Checkbox" > Pets</li> 
    <li><input type="checkbox" name="areaofinterest" value="home_ret" id="home_ret" class="Checkbox"> Retirement</li> 

Come posso utilizzare jQuery per ottenere i valori e l'uscita controllato come areaofinterest = "home_coo, home_mar, home_pet"?

Grazie mille.

Answer 1

Utilizzare la funzione .map():

$('.Checkbox:checked').map(function() {return this.value;}).get().join(',') 

Rottura che verso il basso:

$('.Checkbox:checked') seleziona le caselle di controllo controllato.

.map(function() {return this.value;}) crea un oggetto jQuery che contiene una matrice contenente i valori delle caselle di controllo selezionate.

.get() restituisce l'array effettivo.

.join(','); unisce tutti gli elementi dell'array in una stringa, separati da una virgola.

Working DEMO

Answer 2

var values = ""; 
$("checkbox[name=areaofinterest]").each(function() { 
    values += $(this).val() + ","; 
}); 

values = values.substring(0, values.length - 2); 

Answer 3

var areaofinterest = ''; 

$('[name="areaofinterest"]')​.each(function(i,e) { 
    var comma = areaofinterest.length===0?'':','; 
    areaofinterest += (comma+e.value); 
})​; 

Per ottenere solo controllare valore scatole:

var areaofinterest = ''; 

$('[name="areaofinterest"]')​.each(function(i,e) { 
    if ($(e).is(':checked')) { 
     var comma = areaofinterest.length===0?'':','; 
     areaofinterest += (comma+e.value); 
    } 
})​; 

FIDDLE

Si potrebbe anche fare:

var areaofinterest = []; 
$('[name="areaofinterest"]:checked').each(function(i,e) { 
    areaofinterest.push(e.value); 
}); 

areaofinterest = areaofinterest.join(','); 

E c'è probabilmente un sacco di altri modi per Fai questo ?

Answer 4

provare qualcosa di simile:

var areaofinterest= ""; 

$("input[type=\"checkbox\"]").each(function() { 
    if ($(this).attr("checked")) { 
     if (areaofinterest !== "") areaofinterest += ","; 

     areaofinterest += $(this).value(); 
    } 
}); 

Answer 5

Oppure si utilizza può fare con un array come indicato qui sotto

var checkBoxArray = new Array(); 
var areaofinterest = ''; 

$(':checkbox:checked').each(function(i){ 
     checkBoxArray .push($(this).attr("value")); 

}); 

    if (checkBoxArray .length == 0) { 
    } else { 
    while (checkBoxArray .length != 0) { 
      if (checkBoxArray .length == 1) { 
       areaofinterest += checkBoxArray .pop(); 
      } else { 
       areaofinterest += (checkBoxArray .pop() + ","); 
       } 
      } 
} 
console.log(areaofinterest); 

anche se otterrete stringa in ordine inverso.