Rumah > hujung hadapan web > tutorial js > Ringkasan kaedah untuk mendapatkan nilai yang dipilih dalam kotak semak menggunakan Jquery dan angularjs_jquery

Ringkasan kaedah untuk mendapatkan nilai yang dipilih dalam kotak semak menggunakan Jquery dan angularjs_jquery

WBOY
Lepaskan: 2016-05-16 15:19:30
asal
1975 orang telah melayarinya

Dalam perkembangan biasa kami, kadangkala kami perlu mendapatkan nilai yang dipilih dalam kotak semak dan semua maklumat tentang baris yang dipilih dalam kotak semak. Helah kecil pada masa ini ialah kita boleh meletakkan semua maklumat yang ingin kita perolehi ke dalam nilai kotak semak, supaya apabila kita boleh mendapatkan nilai kotak semak yang dipilih, ia adalah bersamaan dengan mendapatkan maklumat semasa. barisan.

Salin kod Kod adalah seperti berikut:


Pilih semua dan pilih tiada:

var bischecked=$('#cboxchecked').is(':checked'); 
    var fruit=$('input[name="orders"]'); 
    fruit.prop('checked',bischecked); 

Salin selepas log masuk
Mengapa kita menggunakan prop dan bukannya attr di sini kerana

Untuk atribut yang wujud bagi elemen HTML itu sendiri, gunakan kaedah prop semasa memproses.

Untuk atribut DOM tersuai kami sendiri bagi elemen HTML, kami menggunakan kaedah attr semasa memprosesnya.
Dapatkan nilai yang dipilih:

$('input[name="orders"]:checked').each(function(){ 
      var sfruit=$(this).val(); 
      var orders=sfruit.split(","); 
      var reminder=new Object(); 
      reminder.merchantId=orders[0]; 
      reminder.orderCode=orders[1]; 
      reminder.userId=orders[2]; 
  
      }); 

Salin selepas log masuk

pelaksanaan angularjs:

Menggunakan angularjs kita tidak perlu mengendalikan dom, kita hanya perlu mengambil berat tentang status nilai ini;

Mula-mula lihat kod html:

<!DOCTYPE html> 
 <html data-ng-app="App"> 
 <head> 
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
   <script src="script2.js"></script> 
 </head> 
 <body data-ng-controller="AddStyleCtrl"> 
  
   <div>Choose Tags</div>   
   <div> 
     <div>You have choosen:</div> 
     <hr> 
     <label data-ng-repeat="selectedTag in selectedTags"> 
       (({{selectedTag}})) 
     </label> 
     <hr> 
     <div data-ng-repeat="category in tagcategories"> 
       <div>{{ category.name }}</div> 
       <div data-ng-repeat="tag in category.tags"> 
         <div> 
           <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)"> 
           {{ tag.name }} 
         </div> 
       </div> 
       <hr> 
     </div> 
   </div> 
  
 <pre class="brush:php;toolbar:false">{{selected|json}}
{{selectedTags|json}}
Salin selepas log masuk
line2 mentakrifkan Apl AngularJS

line4 memperkenalkan skrip angularjs; line5 memperkenalkan skrip script2.js yang ditulis oleh saya sendiri; line7 menentukan pengawal AddStyleCtrl
line13-15 memaparkan teg yang dipilih kepada pengguna dalam masa nyata
line17-line26 menggunakan gelung berganda untuk menyenaraikan data dalam pangkalan data (dalam kes ini, ia disimpan dalam objek pengawal
). Baris kod dalam baris21 ini sangat berguna:
Id dan nama teg disimpan, dan isSelected(tag.id) digunakan untuk menentukan sama ada ia ditandakan Apabila diklik, kaedah updateSelection($event,tag.id) dipanggil
Jika anda ingin mendapatkan elemen yang mencetuskan fungsi dalam fungsi yang dicetuskan oleh ng-click, anda tidak boleh meneruskannya secara langsung, tetapi anda perlu lulus dalam acara. Kerana dalam Angularjs, ini di tempat ini adalah skop. Kita boleh lulus dalam acara, dan kemudian menggunakan event.target untuk mendapatkan elemen dalam fungsi.
Line29-30 adalah untuk saya lihat semasa ujian Anda boleh melihat kandungan tatasusunan yang dipilih dan tatasusunan Tag terpilih;
Kemudian lihat pada kod AngularJS: (script2.js)

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