用jQuery替换输入值.val() [英] Replace input value .val() with jQuery

问题描述

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

So basically here is my jsFiddle - http://jsfiddle.net/CmNFu/ .

这里也编码-

HTML-

<b style="float: left; margin-right: 10px;">category 1</b><input type="checkbox" value="category1" style="float: left;" class="portfolio-category" /><br />
<b style="float: left; margin-right: 10px;">category 2</b><input type="checkbox" value="category2" style="float: left;" class="portfolio-category" /><br />
<br />
<br />
<input type="text" name="categories" id="portfolio-categories" />​

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

基本上我想实现的是，当用户选中复选框时，该值会自动在输入字段内添加(完成，它正在工作，哇！)，但是问题是当它取消选中该复选框时，该值应该从输入框中删除(问题从这里开始)，它不会删除任何内容.您可以看到我尝试将val()函数分配给变量，但是也没有成功.查看我在jsFiddle上的示例以实时查看它.

​Well basically what I would like to achieve is, when user checks the checkbox, the value automatically adds inside input field (Done, it's working, whooray!), but the problem is when it unchecks the checkbox, the value should be removed from input box (the problem starts here), it doesn't remove anything. You can see I tried assigning val() function to variables, but also without success. Check my example on jsFiddle to see it live.

有什么建议吗?我猜replace()不适用于val()，对吗?

Any suggestions? I guess replace() is not working for val(), is it?

那么，还有其他建议吗?

So, is there any other suggestions?

推荐答案

在该输入框中存在空格问题.但我们稍后会解决.

You have quite the issue with spaces in that input box. but we'll get to that in a moment.

首先，这会工作(如果不是因为空间问题):

first, this will kind of work (if it weren't for the spaces problem):

在最后一个警报之前添加此行:

add this line before the last alert:

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

这将起作用，但并非总是如此，因为您添加的最后一个元素后没有空格.

this will work, but not always, as the last element you append doesn't have a space after it.

但是如果您将第四行更改为此:

but if you change the 4th line to this:

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

它将起作用，因为它将在每个元素之后而不是之前添加空格.

it will work, as it adds the space after each element, instead of before.

http://jsfiddle.net/CmNFu/5/

您的问题是您更改了变量portfolioCategories中的值，但尚未更新输入本身. (注意，更改字符串的值不会更改其原始来源的输入的值)

your issue was that you changed the values in the variable: portfolioCategories, but you haven't updated the input itself. (notice, changing the value of a string, doesn't change the value of the input it originally came from)

这篇关于用jQuery替换输入值.val()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！