Использование jQuery для получения нескольких значений флажка и вывода как разделенных запятыми строк.
У меня есть много флажков, как показано ниже,
<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"?
Большое спасибо.
Ответы
Ответ 1
Используйте функцию .map()
:
$('.Checkbox:checked').map(function() {return this.value;}).get().join(',')
Нарушение этого:
$('.Checkbox:checked')
выбирает отмеченные флажки.
.map(function() {return this.value;})
создает объект jQuery, содержащий массив, содержащий значения отмеченных флажков.
.get()
возвращает фактический массив.
.join(',');
объединяет все элементы массива в строку, разделенную запятой.
Рабочий DEMO
Ответ 2
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(',');
И, возможно, существует множество других способов сделать это?
Ответ 3
var values = "";
$("checkbox[name=areaofinterest]").each(function() {
values += $(this).val() + ",";
});
values = values.substring(0, values.length - 2);
Ответ 4
Попробуйте что-то вроде этого:
var areaofinterest= "";
$("input[type=\"checkbox\"]").each(function() {
if ($(this).attr("checked")) {
if (areaofinterest !== "") areaofinterest += ",";
areaofinterest += $(this).value();
}
});
Ответ 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);
но вы получите строку в обратном порядке.
Ответ 6
Использование jQuery для получения нескольких значений флажка и вывода в виде строки через запятую.
var programming = $("input[name='programming']:checked").map(function() {
return this.value;
}).get().join(', ');
alert("My favourite programming languages are: " + programming);
OR
var favProgramming = [];
$.each($("input[name='programming']:checked"), function(){
favProgramming .push($(this).val());
});
alert("My favourite programming languages are: " + favProgramming);
ДЛЯ ДЕМО ЗДЕСЬ
Ответ 7
var mode = [];
jQuery("input[name='mode[]']:checked").each(function(i) {
mode.push($(this).val());
});