替换输入值.val()为jQuery

12 浏览
0 Comments

替换输入值.val()为jQuery

基本上这是我的jsFiddle - http://jsfiddle.net/CmNFu/。

代码也在这里 -

HTML -

类别1

类别2

​

jQuery -

jQuery(document).ready(function() {

jQuery(".portfolio-category").click(function() {

if(jQuery(this).is(":checked")) {

jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+" "+jQuery(this).val());

}

else {

var portfolioCategories = jQuery("#portfolio-categories").val();

alert("before + "+portfolioCategories);

var currentElement = jQuery(this).val()+" ";

alert(currentElement);

portfolioCategories = portfolioCategories.replace(currentElement, "");

alert(portfolioCategories);

}

});

});

我想实现的基本上是，当用户勾选复选框时，值会自动添加到输入框中（完成，它正在工作，太棒了！），但问题是当用户取消勾选复选框时，值应该从输入框中删除（问题从这里开始），它没有删除任何内容。您可以在jsFiddle上查看我的示例以实时查看。有什么建议吗？我猜replace()对于val()不起作用，对吗？那么，还有其他建议吗？

0

3 答案

0 Comments

问题的原因是在代码中使用了错误的方法来替换输入值。解决方法是使用jQuery的.val()方法来替换输入值，并使用$.trim()方法来去除字符串中的前导和尾随空格。下面是一个可以解决问题的示例代码：

// 获取输入框的值
var inputValue = $("input").val();
// 替换输入框的值为字符串"portfolioCategories"
$("input").val("portfolioCategories");
// 使用$.trim()去除字符串中的前导和尾随空格
var trimmedValue = $.trim(inputValue);

你可以在下面的链接中查看一个可行的解决方案：

[http://jsfiddle.net/CmNFu/11/](http://jsfiddle.net/CmNFu/11/)

希望这对你有所帮助。

0
0 Comments

问题的原因是在于输入框中有空格。首先，如果不考虑空格问题，以下代码将会生效：

jQuery("#portfolio-categories").val(portfolioCategories);

然而，由于最后一个元素之后没有空格，所以这种方法并不总是有效。如果将第四行代码修改为以下形式：

jQuery("#portfolio-categories").val(jQuery("#portfolio-categories").val()+jQuery(this).val()+" ");

那么它将能够正常工作，因为它会在每个元素之后添加空格，而不是之前。

问题在于你改变了变量 `portfolioCategories` 的值，但是你没有更新输入框本身的值（请注意，改变字符串的值并不会改变它最初来自的输入框的值）。

0
0 Comments

问题的出现原因是使用了错误的方法来识别复选框的选中状态，使用了.click()方法而不是.change()方法。这会导致在键盘操作时无法正确识别复选框的选中状态。

解决方法是将代码中的.click()方法替换为.change()方法。这样，无论是通过鼠标点击还是键盘操作，都能正确地识别复选框的选中状态。

0