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:聲明一個數組,如果某個checkbox被選中,就把值push進去,最后用join轉成以逗號分隔的數組。
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;
我的解決辦法是,用數組去遍歷,至于遍歷方法可以很多:
方案1:用reduce(今天剛學了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事件:當CheckBox改變時,判斷checked,以添加或者刪除數據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)建空數組的方法)
回答5:作為一個數組,去除數組種空值項,然后再格式化成字符串
相關文章:
1. HTML5不支持frameset一般怎么解決?2. javascript - Vue的計算屬性底層依賴原理是怎么樣?3. javascript - jquery怎么給select option一個點擊時觸發(fā)的事件,如圖 如果選擇自定義觸發(fā)一個時間?4. 網頁爬蟲 - python爬蟲用BeautifulSoup爬取<s>元素并寫入字典,但某些div下沒有這一元素,導致自動寫入下一條,如何解決?5. 百度地圖api - Android百度地圖SDK,MapView上層按鈕可見卻不可觸,怎么解決?6. mysql 獲取時間函數unix_timestamp 問題?7. html5 - canvas中的mousedrag事件,為什么鼠標拖出canvas,然后再次移入canvas,drag事件還觸發(fā)8. 新入手layuiadmin,部署到tp中。想用php自已寫一個后臺管理系統(tǒng)。9. javascript - react 組件 使用super()報錯10. javascript - es6擴展運算符...的問題
