집 >웹 프론트엔드 >JS 튜토리얼 >Jquery 및 anglejs_jquery를 사용하여 확인란에서 선택된 값을 가져오는 방법 요약

Jquery 및 anglejs_jquery를 사용하여 확인란에서 선택된 값을 가져오는 방법 요약

WBOY원래의: 2016-05-16 15:19:301992검색

일반적인 개발 과정에서 확인란에서 선택한 값과 확인란에서 선택한 행에 대한 모든 정보를 가져와야 하는 경우가 있습니다. 이때 약간의 트릭은 우리가 얻고자 하는 모든 정보를 체크박스의 값에 넣을 수 있다는 것입니다. 이런 식으로 체크박스의 선택된 값을 얻을 수 있다면 이는 다음의 정보를 얻는 것과 같습니다. 현재 행.

코드 복사 코드는 다음과 같습니다.

b6c5a531a458a2e790c1fd6421739d1ce00b31f935151e80cc907b07ca8efbb1b90dd5946f0946207856a8a37f441edf 

모두 선택하고 없음 선택:

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를 사용하면 돔을 운영할 필요가 없으며 이 값의 상태에만 신경 쓰면 됩니다.
먼저 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}}

line2는 AngularJS 앱을 정의합니다.
line4는 anglejs 스크립트를 소개합니다
line5는 제가 직접 작성한 script2.js 스크립트를 소개합니다.
line7은 컨트롤러 AddStyleCtrl을 지정합니다
line13-15는 선택한 태그를 실시간으로 사용자에게 표시합니다.
line17-line26은 이중 루프를 사용하여 데이터베이스의 데이터를 나열합니다(이 경우 컨트롤러의 개체에 저장됩니다).
line21의 다음 코드 줄은 매우 유용합니다. c937a0e240cc43d6c9748f0806786570
태그의 ID와 이름이 저장되며, isSelected(tag.id)를 사용하여 선택 여부를 결정합니다. 클릭하면 updateSelection($event,tag.id) 메소드가 호출됩니다. ng-click으로 실행된 함수에서 함수를 실행한 요소를 가져오려면 이를 직접 전달할 수는 없고, 이벤트를 전달해야 합니다. Angularjs에서는 이곳이 범위이기 때문입니다. 이벤트를 전달한 다음 event.target을 사용하여 함수의 요소를 가져올 수 있습니다.
Line29-30은 테스트 중에 내가 볼 수 있는 것입니다. selected array와 selectedTags array의 내용을 볼 수 있습니다.
그런 다음 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; 
  } 
});

성명：

이전 기사：jquery 유효성 검사 양식의 기본 사용법 시작하기다음 기사：jquery 유효성 검사 양식의 기본 사용법 시작하기

Jquery 및 anglejs_jquery를 사용하여 확인란에서 선택된 값을 가져오는 방법 요약

관련 기사