javascript - Replace input value .val() with jQuery - Stack Overflow

admin管理员组

文章数量:1333403

So basically here is my jsFiddle - / .

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?

So basically here is my jsFiddle - http://jsfiddle/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?

• javascript
• jquery

Share Improve this question Follow asked Aug 1, 2012 at 13:33 y2oky2ok 65855 silver badges1818 bronze badges 1

• Does this answer help you? stackoverflow./questions/11735660/… – Jonas G. Drange Commented Aug 1, 2012 at 13:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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/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)

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/CmNFu/11/

Hope this helps.

本文标签： javascriptReplace input value val() with jQueryStack Overflow