Jqueryとangularjs checkボックスで選択した値を取得する方法の概要

通常の開発では、checkボックスで選択した値と、checkボックスで選択した行のすべての情報を取得する必要がある場合があります.このとき、取得する情報をすべてcheckボックスの値に入れることで、checkボックスの選択値を取得できるようにすると、現在の行の情報を取得することになります.

すべて選択:

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コードを見てみましょう.

 
  
  
    
    
  
  
  
   
Choose Tags
   
   
 
     
You have choosen:
 
     
 
      
       (({{selectedTag}})) 
      
     
 
     
 
       
{{ category.name }}
 
       
 
         
 
            
           {{ tag.name }} 
         
 
       
 
       
 
     
 
   
 
  
 
{{selected|json}}
  
{{selectedTags|json}}
  
Line 2はAngularJS Appを  した.line 4はangularjsスクリプトを  します.line 5は  で いたscript 2を  する.jsスクリプト;Line 7コントローラAddStyleCtrl line 13-15を  し、  したラベルをリアルタイムでユーザーに  します.line 17-line 26は、  ループを  してデータベース(この ではcontrollerのオブジェクトに  されている)のデータをリストします.line 21のこの のコードの  は きくなります:tagのid,nameを  して、isSelected(tag.id)を  してcheckedされるかどうかを  して、クリックする updateSelection($event,tag.id)の  を び します;ng-clickがトリガした  でこの  をトリガした  を  するには、thisに    することはできません.eventを  する  があります.Angularjsの にあるので、この  のthisはscopeです.eventに  し、  の でeventを  することができます.targetを  して  を  します.line 29-30はテスト に  に せたもので、selected  とselectedTags  の  が えます.
 にAngularJSコードを てみましょう:(script 2.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?'add':'remove'); 
    updateSelected(action,id,checkbox.name); 
  } 
 
  $scope.isSelected = function(id){ 
    return $scope.selected.indexOf(id)>=0; 
  } 
});