需要將選中的複選框的值輸入到輸入文件中，並用逗號分隔

我正在嘗試選取一系列複選框，並在輸入字段中創建逗號分隔列表。這有點超出了我的jQuery技能。需要將選中的複選框的值輸入到輸入文件中，並用逗號分隔

下面是HTML的一個樣本：

<input type="checkbox" value="Bill" id="CAT_Custom_173676_0" name="CAT_Custom_173676" />Bill<br /> 
<input type="checkbox" value="Dan" id="CAT_Custom_173676_1" name="CAT_Custom_173676" />Dan<br /> 
<input type="checkbox" value="Francis" id="CAT_Custom_173676_2" name="CAT_Custom_173676" />Francis<br />

我需要從這些複選框取值，並將其插入到這個領域

<input type="text" class="cat_textbox" id="CAT_Custom_172786" name="CAT_Custom_172786" maxlength="1024" />

所以，如果所有的複選框以上進行檢查，輸入字段的值將是「Bill，Dan，Francis」。

提交表單時可能發生此事件。

任何幫助，將不勝感激。

來源

2010-08-19 Mike Muller

可以使用map()這裏創建包含選中的複選框的值的新的jQuery對象，然後使用get()，得到的陣列，然後用join(",")^NB創建以逗號分隔的這些值的字符串：

var arr = $("input:checked").map(function() { return this.value; }); 
$("#CAT_Custom_172786").val(arr.get().join(","));

Example

^{NB：可以實際省略加入（），因爲陣列轉換爲字符串，並且自動接合逗號分隔。個人喜好在這裏發揮作用。}

來源

2010-08-19 13:31:15

安迪，這是偉大的工作。有沒有辦法讓它變成動態的，這意味着當用戶選擇複選框時，腳本會更新字段？ – 2010-08-19 13:33:36

@mmsa：我剛剛給答案添加了一個例子，將處理程序應用於* change（）*事件。看看示例鏈接，代碼就在你身邊。 – 2010-08-19 13:36:31

完美！感謝您及時的回覆。我需要查看map（）函數！ – 2010-08-19 13:39:17

而且這將返回所有選中的複選框有名爲「CAT_Custom_173676」

alert($("input[name=CAT_Custom_173676]:checked").map(function() { 
return this.value;}).get().join(","));

來源

2011-05-24 19:37:29

需要將選中的複選框的值輸入到輸入文件中，並用逗號分隔

回答

相關問題