Sử dụng jQuery để nhận giá trị và đầu ra của nhiều hộp kiểm dưới dạng Chuỗi phân cách bằng dấu phẩy.

Question

Tôi có nhiều checkboxs như dưới đây,

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

Làm thế nào tôi có thể sử dụng jQuery để có được những giá trị và sản lượng kiểm tra như areaofinterest = "home_coo, home_mar, home_pet"?

Cảm ơn rất nhiều.

Answer 1

Sử dụng .map() chức năng:

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

Breaking đó xuống:

$('.Checkbox:checked') chọn các hộp kiểm kiểm tra.

.map(function() {return this.value;}) tạo đối tượng jQuery chứa một mảng chứa các giá trị của hộp kiểm được chọn.

.get() trả về mảng thực tế.

.join(','); kết hợp tất cả các phần tử của mảng thành một chuỗi, được phân tách bằng dấu phẩy.

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

Để có được chỉ kiểm tra hộp giá trị:

var areaofinterest = ''; 

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

FIDDLE

Bạn cũng có thể làm:

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

areaofinterest = areaofinterest.join(','); 

Và có lẽ là một loạt các cách khác để làm cái này ?

Answer 4

Hãy thử một cái gì đó như thế này:

var areaofinterest= ""; 

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

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

Answer 5

Hoặc bạn sử dụng có thể thực hiện bằng mảng như hình dưới đây

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

mặc dù bạn sẽ nhận được chuỗi theo thứ tự ngược.