Jquery和angularjs获取check框选中的值的方法汇总

Jquery和angularjs获取check框选中的值的方法汇总_jquery

php中文网

发布： 2016-05-16 15:19:30

原创

2232人浏览过

在我们平常的开发中，有时候会需要获取一下check框选中的值，以及check框选中行的所有信息。这个时候有一个小技巧那就是我们可以把要获取的信息全部放到check框的值里面，这样我们可以获取check框选中值的时候也就相当于获取了当前行的信息。

复制代码代码如下:

全选全不选：

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

登录后复制

这里为什么要用prop而不用attr,这是因为

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

407

查看详情

对于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}}

登录后复制