ホームページ >ウェブフロントエンド >jsチュートリアル >Jqueryとangularjs_jqueryを使ってチェックボックスに選択されている値を取得する方法のまとめ

Jqueryとangularjs_jqueryを使ってチェックボックスに選択されている値を取得する方法のまとめ

WBOYオリジナル: 2016-05-16 15:19:301958ブラウズ

通常の開発では、チェックボックスで選択された値と、チェックボックスで選択された行に関するすべての情報を取得する必要がある場合があります。このときのちょっとしたコツは、チェックボックスの値に取得したい情報をすべて入れることができるということです。このようにチェックボックスの選択値を取得できれば、の情報を取得したことと同じになります。現在の行。

コードをコピーしますコードは次のとおりです:

b6c5a531a458a2e790c1fd6421739d1cdab837e31417ea5aed8ea85c01ebd366b90dd5946f0946207856a8a37f441edf

すべてを選択し、何も選択しません:

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

なぜここで attr の代わりに prop を使用するのでしょうか?これは

のためです。

HTML要素自体の固有属性については、処理時にpropメソッドを使用します。
HTML 要素の独自のカスタム DOM 属性の場合、処理時に attr メソッドを使用します。
選択した値を取得します:

$('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 実装:

angularjs を使用すると、dom を操作する必要がなく、この値のステータスを気にするだけで済みます。
まず 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}}

行 2 は AngularJS アプリを定義します。
行 4 では angularjs スクリプトを導入します
行 5 では、私が作成した script2.js スクリプトを紹介します
7行目はコントローラーAddStyleCtrl
を指定しています。行 13 ～ 15 は、選択したタグをユーザーにリアルタイムで表示します
line17-line26 は二重ループを使用してデータベース内のデータをリストします (この場合、データはコントローラーのオブジェクトに保存されます)。 line21 のこのコード行は非常に便利です: c937a0e240cc43d6c9748f0806786570
タグの ID と名前が保存され、クリックされると、isSelected(tag.id) が使用されて、updateSelection($event,tag.id) メソッドが呼び出されます。 ng-clickでトリガーされる関数の中で、関数をトリガーした要素を取得したい場合は、これを直接渡すことはできず、イベントで渡す必要があります。 Angularjs では、この場所のこれがスコープであるためです。イベントを渡してから、event.target を使用して関数内の要素を取得できます。
29 行目から 30 行目は、私自身がテスト中に確認するためのものです。selected 配列と selectedTags 配列の内容を確認できます。
次に、AngularJS コードを見てみましょう: (script2.js)

/** 
 * Created by zh on 20/05/15. 
 */ 
// Code goes here 
 
var iApp = angular.module("App", []); 

iApp.controller('AddStyleCtrl', function($scope) 
{ 
  $scope.tagcategories = [ 
    { 
      id: 1, 
      name: 'Color', 
      tags: [ 
        { 
          id:1, 
          name:'color1' 
        }, 
        { 
          id:2, 
          name:'color2' 
        }, 
        { 
          id:3, 
          name:'color3' 
        }, 
        { 
          id:4, 
          name:'color4' 
        }, 
      ] 
    }, 
    { 
      id:2, 
      name:'Cat', 
      tags:[ 
        { 
          id:5, 
          name:'cat1' 
        }, 
        { 
          id:6, 
          name:'cat2' 
        }, 
      ] 
    }, 
    { 
      id:3, 
      name:'Scenario', 
      tags:[ 
        { 
          id:7, 
          name:'Home' 
        }, 
        { 
          id:8, 
          name:'Work' 
        }, 
      ] 
    } 
  ]; 
 
  $scope.selected = []; 
  $scope.selectedTags = []; 
 
  var updateSelected = function(action,id,name){ 
    if(action == 'add' && $scope.selected.indexOf(id) == -1){ 
      $scope.selected.push(id); 
      $scope.selectedTags.push(name); 
    } 
    if(action == 'remove' && $scope.selected.indexOf(id)!=-1){ 
      var idx = $scope.selected.indexOf(id); 
      $scope.selected.splice(idx,1); 
      $scope.selectedTags.splice(idx,1); 
    } 
  } 
 
  $scope.updateSelection = function($event, id){ 
    var checkbox = $event.target; 
    var action = (checkbox.checked&#63;'add':'remove'); 
    updateSelected(action,id,checkbox.name); 
  } 
 
  $scope.isSelected = function(id){ 
    return $scope.selected.indexOf(id)>=0; 
  } 
});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jquery validate form validation_jquery の基本的な使い方を始める次の記事：jquery validate form validation_jquery の基本的な使い方を始める

続きを見る

Jqueryとangularjs_jqueryを使ってチェックボックスに選択されている値を取得する方法のまとめ

関連記事