我正在尝试创建一个带有某个值的复选框，然后显示以逗号分隔的所选复选框的值。
我可以创建一个复选框，但我无法在文本框中显示这些值。 请帮忙。
http://jsfiddle.net/0q0ns1ez/1/
function displayCheckbox(){
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
CountSelectedCB[0] = $(this).attr("id");
}
});
$('input[name=selectedCB]').val(CountSelectedCB);
});
}
答案 0 :(得分：0)
您正在覆盖CountSelectedCB[0]。
最好尝试类似
的内容var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
$target.val(
$checkboxes.map(function() {
return this.checked ? this.id : null;
}).get().join()
);
});
var abc = [1, 2, 3];
var CountSelectedCB = new Array();
var s1 = document.getElementById('demo');
for (var option in abc) {
if (abc.hasOwnProperty(option) && !document.getElementById('CheckBox' + abc[option])) {
var pair = abc[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = 'CheckBox' + pair;
checkbox.name = pair;
checkbox.value = pair;
s1.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s1.appendChild(label);
s1.appendChild(document.createElement("br"));
}
}
var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
$target.val(
$checkboxes.map(function() {
return this.checked ? this.id : null;
}).get().join()
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="demo"></div>
<input type="text" name="selectedCB" />
或者像这样：
var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
$target.val(
$checkboxes.filter(':checked').map(function() {
return this.id;
}).get().join()
);
});
var abc = [1, 2, 3];
var CountSelectedCB = new Array();
var s1 = document.getElementById('demo');
for (var option in abc) {
if (abc.hasOwnProperty(option) && !document.getElementById('CheckBox' + abc[option])) {
var pair = abc[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = 'CheckBox' + pair;
checkbox.name = pair;
checkbox.value = pair;
s1.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s1.appendChild(label);
s1.appendChild(document.createElement("br"));
}
}
var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
$target.val(
$checkboxes.filter(':checked').map(function() {
return this.id;
}).get().join()
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="demo"></div>
<input type="text" name="selectedCB" />
答案 1 :(得分：0)
您的方法存在的主要问题是：
CountSelectedCB[0] = $(this).attr("id");
你使用数组CountSelectedCB的方式，你总是在第一个位置（索引0）插入一个复选框的id，所以无论选中了多少个复选框，你总是会得到一个id如果没有选中复选框，则（或没有ids）。
您应该将上面的行更改为：
CountSelectedCB.push($(this).attr("id"));
此外，由于CountSelectedCB的范围比displayCheckbox更高，因此它会在displayCheckbox的调用之间保持其值，因此change的每次触发都是如此在添加已更新的已检查ID列表之前，您必须clear the array。否则，您更新的ID列表将附加到先前存储的列表中。
以下是您的代码的外观（sample Fiddle）：
function displayCheckbox(){
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0; // clear selected cb count before adding the updated ones
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("id")); // add id to count selected cb
}
});
$('input[name=selectedCB]').val(CountSelectedCB);
});
}
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox(){
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0; // clear selected cb count
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("id"));
}
});
$('input[name=selectedCB]').val(CountSelectedCB);
});
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb1">Checkbox #1
<input type="checkbox" id="cb2">Checkbox #2
<input type="checkbox" id="cb3">Checkbox #3
<hr />
<input name="selectedCB">
以下是实现此目标的另一种方法（sample Fiddle）
基本上，您最初会在每个复选框中添加change侦听器（在文档就绪或其他事件上，具体取决于您的应用程序逻辑），这将打印所有选中的复选框。
var checkboxes = $("input:checkbox"); // save checkboxes into a variable so we don't waste time by looking them up each time
// add change listeners to checkboxes
$.each(checkboxes, function() {
$(this).change(printChecked);
})
你创建了一个实际打印复选框的ID的功能：
function printChecked() {
var checkedIds = [];
// for each checked checkbox, add it's id to the array of checked ids
checkboxes.each(function() {
if($(this).is(':checked')) {
checkedIds.push($(this).attr('id'));
}
});
$('input[name=selectedCB]').val(checkedIds);
}
$(document).ready(displayCheckbox);
function displayCheckbox() {
var checkboxes = $("input[type=checkbox]");
var displayField = $('input[name=selectedCB]');
$.each(checkboxes, function() {
$(this).change(printChecked);
})
function printChecked() {
var checkedIds = [];
// for each checked checkbox, add it's id to the array of checked ids
checkboxes.each(function() {
if($(this).is(':checked')) {
checkedIds.push($(this).attr('id'));
}
});
displayField.val(checkedIds);
}
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb1">Checkbox #1
<input type="checkbox" id="cb2">Checkbox #2
<input type="checkbox" id="cb3">Checkbox #3
<hr />
<input name="selectedCB">
答案 2 :(得分：-1)
循环遍历所有复选框并将值保存在某些字符串中，然后将其放在textfield中：
var string = "";
$('.checkButtonClass').each(function() {
if($(this).is(':checked')) {
string = string + $(this).val() +", ";
}
$("#idTextfield").html(string);