Rumah > hujung hadapan web > tutorial js > Kaedah pelaksanaan menjumlahkan berbilang input dalam jQuery_jquery

Kaedah pelaksanaan menjumlahkan berbilang input dalam jQuery_jquery

WBOY
Lepaskan: 2016-05-16 16:14:12
asal
1326 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah pelaksanaan menjumlahkan berbilang input dalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Kod halaman html adalah seperti berikut:

<td> 
  <input name="add" id="add" readonly="readonly"/> 
</td> 
<pre name="code" class="html"><td> 
  <input name="add1" id="add1"/> 
</td> 
<td> 
  <input name="add2" id="add2"/> 
</td> 
Salin selepas log masuk

Sebahagian daripada kod jQuery adalah seperti berikut:

<script> 
$("input[id^='add']").change(function(){ 
    var sum=0; 
    $("input[id^='add']").each(function(){ 
      var r = /^-&#63;\d+$/ ; //正整数 
      if($(this).val() !=''&&!r.test($(this).val())){ 
       $(this).val("");  //正则表达式不匹配置空 
      }else if($(this).val() !=''){ 
       sum+=parseInt($(this).val()); 
      } 
      document.getElementById("add").value=sum; 
      }); 
    }); 
</script> 

Salin selepas log masuk

Memandangkan atribut input adalah baca sahaja, apabila anda menekan Backspace dalam penyemak imbas untuk memadam nilai input, halaman akan kembali untuk penyelesaian, sila rujuk artikel sebelumnya "Kaedah Pelaksanaan JQuery untuk Mencegah Backspace. Kunci daripada Mengembalikan

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan