我在单击复选框时填充文本框,并使用它们的值(逗号分隔)现在我想在取消选中复选框时从文本框中删除该值。
这就是我现在所在的位置:
$(document).ready(function () {
$('.checkboxes').change(function () {
if ($(this).is(':checked')) {
if ($('.DISTRIBUTION').val().length == 0) {
var current = $('.DISTRIBUTION').val() + $(this).val() + ",";
}
else {
var current = $('.DISTRIBUTION').val() + "," + $(this).val();
}
}
else if ($(this).not(':checked')) {
var current = $('.DISTRIBUTION').val().replace(","+$(this).val(), "");
}
$('.DISTRIBUTION').val(current);
});
});
效果很好!除了第一个值,它前面没有逗号。我该如何处理这种情况?我如何找出要删除的值实际上是文本框中的第一项?
这是一个例子:
苹果、梨、桃子、香蕉
当我删除“,梨”和“,香蕉”时,它工作正常,但是当我到达“,苹果”时,它不起作用,因为苹果是第一个并且没有逗号。
注意:我需要文本框按照我检查的顺序添加项目...如果我每次即时重建复选框列表,它会按照它们在屏幕上出现的顺序而不是顺序添加它们我点击。
谢谢!
最佳答案
我建议每次都重建一个新值,而不是尝试插入和删除现有值。
以下示例使用的 HTML 如下:
<input type="checkbox" class="fruit" value="apple" />Apple
<input type="checkbox" class="fruit" value="banana" />Banana
<input type="checkbox" class="fruit" value="peach" />Peach
<input type="checkbox" class="fruit" value="pear" />Pear
按出现顺序排列的值
要按照值在 DOM 中出现的顺序显示值,您可以执行以下操作:
function setValue() {
var items = $(".fruit");
var result = [];
for (var i = 0; i < items.length; i++) {
var item = $(items[i]);
if (item.is(":checked")) {
result.push(item.val());
}
}
var text = result.join(",");
$(".DISTRIBUTION").val(text);
}
按选择顺序排列的值
如果您想保留它们的选择顺序,那么您可以这样做:
var results = [];
$(".fruit").change(function () {
var item = $(this).val();
var index = results.indexOf(item);
if ($(this).is(":checked")) {
if (index == -1) {
results.push(item);
}
} else {
if (index > -1) {
results.splice(index, 1);
}
}
$(".DISTRIBUTION").val(results.join(","));
});
关于jquery - 根据复选框从文本框中删除值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18873420/