用jQuery替换输入值.val（）

Question

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

And code also here -

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

​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.

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

So, is there any other suggestions?

Answer 1

I'd do this:

jQuery(document).ready(function() {
    jQuery(".portfolio-category").on('change', function() {
        var string = "";
        $('input[type="checkbox"]').each(function() {
            var space = string.length>0?' ':'';
            string += this.checked?space+this.value:'';
        });
        $("#portfolio-categories").val(string);
    });
});

FIDDLE

Answer 2

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/

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)

Answer 3

What you need is to insert back the string portfolioCategories into the input. Also the spaces are creating a lot of problems. You could use $.trim(str) to remove any leading and trailing spaces from a string. Have updated your fiddle with a solution that works.

http://jsfiddle.net/CmNFu/11/

Hope this helps.