用jQuery替換輸入值.val（）

Question

所以基本上這裏是我的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); 
     } 
    }); 
}); 

嗯，基本上我想實現的是，當用戶檢查複選框什麼，值自動添加內部輸入字段（完成，它的工作，whooray！），但問題是，當它取消選中複選框，值應該從輸入框中刪除（問題從這裏開始），它不刪除任何東西你可以看到我試圖給變量賦值val（）函數，但也沒有成功。檢查我的例子在jsFiddle看到它的生活。

有什麼建議嗎？我猜replace（）不適用於val（），是嗎？

那麼，有沒有其他建議？

Answer 1

你有相當與在該輸入框的空間的問題。但我們馬上就會明白這一點。

第一，這將這類工作的（如果不是因爲空間的問題）：

最後警報之前加入這一行：

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

這會工作，但並非總是如此，作爲你追加的最後一個元素後面沒有空格。

，但如果你改變了四號線到這一點：

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

它會工作，因爲它的兩個元素增加了空間，而不是之前。

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

您的問題是，你改變了變量的值：portfolioCategories，但是你有沒有更新的輸入本身。 （注意，改變一個字符串的值，不會改變它最初來自的輸入值）

Answer 2

我應該這樣做：

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 3

你需要的是將字符串portfolioCategories插回到輸入中。這些空間也造成了很多問題。您可以使用$ .trim（str）從字符串中刪除任何前導和尾隨空格。 已經更新你的小提琴的解決方案。

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

希望這有助於。