javascript – So erhalten Sie den Wert des Mehrfachauswahlfelds zum Spleißen und entfernen das Komma nach den deaktivierten Optionen
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-07-05 10:51:54
0
5
950

Die XML-Vorlage, die mir der Hintergrund gegeben hat:
<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>")

Ich verwende diese Methode zum Bestimmen und anschließenden Spleißen, aber wenn die letzte Option nicht ausgewählt ist, folgt auf die vorherige Option ein Komma. Was soll ich tun?

曾经蜡笔没有小新
曾经蜡笔没有小新

Antworte allen(5)
阿神

声明一个数组,如果某个checkbox被选中,就把值push进去,最后用join转成以逗号分隔的数组。

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

楼上用正则表达式只能去除最后一个逗号,如果前面有没选的,还是会有多余的逗号。

巴扎黑
var str = "<Pay>"+PT1+","+PT2+","+PT3+"</Pay>";
$("#textarea").html(str.replace(/,<\/Pay>$/, '</Pay>'))
曾经蜡笔没有小新
    var array = new Array();
    $("input").each(function (index) {
        if($(this).is(":checked")) {
            array.push(index);
        }
    });
    $("#textarea").html("<Pay>"+array.join(",")+"</Pay>");
大家讲道理

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循环

<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 创建空数组的方法)

淡淡烟草味

作为一个数组,去除数组种空值项,然后再格式化成字符串

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage