javascript - Bagaimana untuk mendapatkan nilai kotak berbilang pilihan untuk penyambungan dan keluarkan koma selepas pilihan yang tidak ditandakan

Question

Templat XML yang diberikan kepada saya melalui latar belakang:
<Bayar>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>")

Saya menggunakan kaedah ini untuk menentukan dan kemudian menyambung, tetapi jika pilihan terakhir tidak dipilih, maka pilihan sebelumnya diikuti dengan koma, apa yang perlu saya lakukan

Answer 1

Isytiharkan tatasusunan Jika kotak pilihan dipilih, tolak nilai ke dalamnya dan akhirnya gunakan join untuk menukarnya menjadi tatasusunan yang dipisahkan koma.

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

Ungkapan biasa yang digunakan di tingkat atas hanya boleh mengalih keluar koma terakhir Jika ada yang tidak dipilih di hadapan, masih akan ada koma tambahan.

Answer 2

var str = "<Pay>"+PT1+","+PT2+","+PT3+"</Pay>";
$("#textarea").html(str.replace(/,<\/Pay>$/, '</Pay>'))

Answer 3

    var array = new Array();
    $("input").each(function (index) {
        if($(this).is(":checked")) {
            array.push(index);
        }
    });
    $("#textarea").html("<Pay>"+array.join(",")+"</Pay>");

Answer 4

1. Saya faham keperluan anda: anda hanya perlu memaparkannya mengikut urutan, tanpa mengira susunan pemilihan. Sebagai contoh, sama ada anda memilih 2 atau 0 dahulu, paparan akan menjadi 0, 2;

Penyelesaian saya ialah menggunakan array untuk melintasi Terdapat banyak kaedah traversal:

• Pilihan 1: Gunakan reduce (Saya baru belajar mengurangkan hari ini, mari bermain dengannya)

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

• Pilihan 2: Gunakan 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>

• Pilihan 3: Gunakan 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 Jika anda mempertimbangkan pesanan klik, anda boleh menggunakan acara perubahan: apabila Kotak Semak berubah, hakim menyemak untuk menambah atau memadam data

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>")
})

(Belajar daripada huguangju kaedah mencipta tatasusunan kosong)

Answer 5

Sebagai tatasusunan, alih keluar item nol dalam tatasusunan dan kemudian formatkannya menjadi rentetan