問(wèn)題描述

后臺(tái)給我的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>')

我用這種方法判斷后拼接但是如果最后一個(gè)選項(xiàng)未選擇那么前一個(gè)選項(xiàng)后面就跟了一個(gè)逗號(hào)，怎么辦

問(wèn)題解答

聲明一個(gè)數(shù)組，如果某個(gè)checkbox被選中，就把值push進(jìn)去，最后用join轉(zhuǎn)成以逗號(hào)分隔的數(shù)組。

var selected = []if ($('.PT1').is(’:checked’)) selected.push(’1’)// ... ...$('#textarea').html('<Pay>'+ selected.join() + '</Pay>')

樓上用正則表達(dá)式只能去除最后一個(gè)逗號(hào)，如果前面有沒(méi)選的，還是會(huì)有多余的逗號(hào)。

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.我理解你的需求是：只需要順序展示就可以，不考慮選中的順序。比如無(wú)論是先選中2還是先選中0，展示都是0，2;

我的解決辦法是,用數(shù)組去遍歷，至于遍歷方法可以很多：

方案1：用reduce（今天剛學(xué)了reduce，拿來(lái)玩玩）

<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.如果考慮點(diǎn)擊順序，可以用change事件:當(dāng)CheckBox改變時(shí)，判斷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ù)組的方法)

作為一個(gè)數(shù)組，去除數(shù)組種空值項(xiàng)，然后再格式化成字符串