jQueryを使用して複数のチェックボックスの値を取得し、コンマ区切りの文字列として出力します。

Question

私は

<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> 

は、どのように私はjQueryのareaofinterest = "home_coo、home_mar、home_pet" としてチェック値と出力を取得するために使用することができ、以下のように多くのcheckboxsがありますか？

ありがとうございます。

Answer 1

は.map()機能を使用します。

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

それを破壊：

$('.Checkbox:checked')がチェックチェックボックスを選択します。

.map(function() {return this.value;})は、チェックされたチェックボックスの値を含む配列を保持するjQueryオブジェクトを作成します。

.get()は実際の配列を返します。

.join(',');は、配列のすべての要素をコンマで区切って文字列に結合します。

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); 
})​; 

にのみ取得するにはボックスの値を確認：

var areaofinterest = ''; 

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

FIDDLE

また、行うことができます：

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

areaofinterest = areaofinterest.join(','); 

をそして他の方法の束がにおそらくありますこれを行う ？

Answer 4

このような何かを試してみてください：

var areaofinterest= ""; 

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

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

Answer 5

それとも使用あなたが逆の順序で文字列を取得しますけれども

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); 

の下に表示のようなアレイを使用して行うことができます。