Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Methoden zum Abrufen des im Kontrollkästchen ausgewählten Werts mithilfe von Jquery und anglejs_jquery

Zusammenfassung der Methoden zum Abrufen des im Kontrollkästchen ausgewählten Werts mithilfe von Jquery und anglejs_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 15:19:302047Durchsuche

In unserer üblichen Entwicklung müssen wir manchmal den im Kontrollkästchen ausgewählten Wert und alle Informationen über die im Kontrollkästchen ausgewählte Zeile abrufen. Ein kleiner Trick zu diesem Zeitpunkt besteht darin, dass wir alle Informationen, die wir erhalten möchten, in den Wert des Kontrollkästchens einfügen können. Wenn wir also den ausgewählten Wert des Kontrollkästchens erhalten, entspricht dies dem Abrufen der aktuellen Informationen Reihe.

Code kopieren Der Code lautet wie folgt:

Alle auswählen und keine auswählen:

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

Warum verwenden wir hier prop anstelle von attr? Das liegt daran, dass

Für die inhärenten Attribute des HTML-Elements selbst verwenden Sie bei der Verarbeitung die prop-Methode.

Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden wir bei der Verarbeitung die Methode attr.
Holen Sie sich den ausgewählten Wert:

$('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]; 
  
      });

AngularJS-Implementierung:

Mit AngularJS müssen wir den Dom nicht bedienen, wir müssen uns nur um den Status dieses Werts kümmern;

Schauen Sie sich zunächst den HTML-Code an:

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erste Schritte mit der grundlegenden Verwendung von jQuery-Validierungsformular validation_jqueryNächster Artikel：Erste Schritte mit der grundlegenden Verwendung von jQuery-Validierungsformular validation_jquery

In Verbindung stehende Artikel

Mehr sehen