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


Posted in Javascript onJanuary 17, 2016

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

<td><input class="states" type="checkbox"  name="orders"  value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/></td> 

全选全不选:

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

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

对于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>{{selected|json}}</pre> 
 <pre>{{selectedTags|json}}</pre> 
  
 </body> 
 </html>

line2 定义了AngularJS App;
line4 引入angularjs脚本;
line5 引入自己写的script2.js脚本;
line7 指定控制器AddStyleCtrl
line13-15 实时显示已选标签给用户看;
line17-line26 使用双重循环列出数据库(本例中就存储在了controller的一个对象里)中的数据;
line21的这行代码作用可大了:<inputtype="checkbox" id={{tag.id}}name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

存储了tag的id,name,利用isSelected(tag.id)来判断是否被checked,点击时候调用updateSelection($event,tag.id)方法;

如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入 this ,而需要传入event。因为在Angularjs里面,这个地方的this是 scope 。我们可以传入 event,然后在函数里面通过 event.target 来获取到该元素。
line29-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?'add':'remove'); 
    updateSelected(action,id,checkbox.name); 
  } 
 
  $scope.isSelected = function(id){ 
    return $scope.selected.indexOf(id)>=0; 
  } 
});
Javascript 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
层叠菜单的动态生成
2006/10/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python操作列表的函数使用代码详解
2017/12/28 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
电力安全事故反思
2014/04/27 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
导游词之阆中古城
2019/12/23 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电