javascript - 獲取多選框的值進行拼接怎么移除未選項后的逗號
問題描述
后臺給我的XML模板:<Pay>0,1,2</Pay>
<input type='checkbox' name='PayTypeList' class='PT1'>1<input type='checkbox' name='PayTypeList' class='PT2'>2<input type='checkbox' name='PayTypeList' class='PT3'>3<script>($('.PT1').is(’:checked’)==true)?PT1='0':PT1='';($('.PT2').is(’:checked’)==true)?PT2='1':PT2='';($('.PT3').is(’:checked’)==true)?PT3='2':PT3='';</script>
$('#textarea').html('<Pay>'+PT1+','+PT2+','+PT3+'</Pay>')
我用這種方法判斷后拼接但是如果最后一個選項未選擇那么前一個選項后面就跟了一個逗號,怎么辦
問題解答
回答1:聲明一個數(shù)組,如果某個checkbox被選中,就把值push進去,最后用join轉(zhuǎn)成以逗號分隔的數(shù)組。
var selected = []if ($('.PT1').is(’:checked’)) selected.push(’1’)// ... ...$('#textarea').html('<Pay>'+ selected.join() + '</Pay>')
樓上用正則表達式只能去除最后一個逗號,如果前面有沒選的,還是會有多余的逗號。
回答2:var str = '<Pay>'+PT1+','+PT2+','+PT3+'</Pay>';$('#textarea').html(str.replace(/,</Pay>$/, ’</Pay>’))回答3:
var array = new Array(); $('input').each(function (index) {if($(this).is(':checked')) { array.push(index);} }); $('#textarea').html('<Pay>'+array.join(',')+'</Pay>');回答4:
1.我理解你的需求是:只需要順序展示就可以,不考慮選中的順序。比如無論是先選中2還是先選中0,展示都是0,2;
我的解決辦法是,用數(shù)組去遍歷,至于遍歷方法可以很多:
方案1:用reduce(今天剛學(xué)了reduce,拿來玩玩)
<script>var arr = [PT1,PT2,PT3];var res = arr.reduce(function(pre,cur,arr){ if(pre!=’’&&cur!=’’){ return pre + ’,’ + cur;} else if(pre!=’’&&cur==’’){return pre;} else if(pre==’’ && cur!=’’){return cur;} else{return ’’;} })$('#textarea').html('<Pay>'+res+'</Pay>')</script>
方案2:用filter + join
<script>var arr = [PT1,PT2,PT3];var newarr = arr.filter(function(v,i){ return v==’’?false:true; })var res = newarr.join(’,’);$('#textarea').html('<Pay>'+res+'</Pay>')</script>
方案3:用for循環(huán)
<script>var arr = [PT1,PT2,PT3];var res = ’’;for(var i=0;i<arr.length;i++){if(arr[i]!=’’){ if(res!=’’){ res += ',' + arr[i]; }else{ res += arr[i];}}else{ continue;}}$('#textarea').html('<Pay>'+res+'</Pay>')</script>
2.如果考慮點擊順序,可以用change事件:當(dāng)CheckBox改變時,判斷checked,以添加或者刪除數(shù)據(jù)html:
<input type='checkbox' name='PayTypeList' value=’0’ class='PT1'>1<input type='checkbox' name='PayTypeList' value=’1’ class='PT2'>2<input type='checkbox' name='PayTypeList' value=’2’ class='PT3'>3
javascript
var select = [];$(’[name=PayTypeList]’).change(function(e){ if(e.target.checked){select.push(e.target.value); }else{select = select.filter(function(v,i){ return v != e.target.value;}) }$('#textarea').html('<Pay>'+ select.join +'</Pay>')})
(借鑒了 huguangju 創(chuàng)建空數(shù)組的方法)
回答5:作為一個數(shù)組,去除數(shù)組種空值項,然后再格式化成字符串
相關(guān)文章:
1. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?2. java - spring boot 如何打包成asp.net core 那種獨立應(yīng)用?3. java - 在用戶不登錄的情況下,用戶如何添加保存到購物車?4. datetime - Python如何獲取當(dāng)前時間5. docker start -a dockername 老是卡住,什么情況?6. javascript - nginx反向代理靜態(tài)資源403錯誤?7. docker網(wǎng)絡(luò)端口映射,沒有方便點的操作方法么?8. 安全性測試 - nodejs中如何防m(xù)ySQL注入9. javascript - 關(guān)于apply()與call()的問題10. python - 調(diào)用api輸出頁面,會有標簽出現(xiàn),請問如何清掉?
