当前位置:小鱼儿玄机二站 > 操作系统 > AngularJS实现全选反选功能,javascript实现简单的全

AngularJS实现全选反选功能,javascript实现简单的全

文章作者:操作系统 上传时间:2019-09-03

AngularJS是为了制服HTML在营造利用上的欠缺而安插的。HTML是一门很好的为静态文本展示设计的表明式语言,但要创设WEB应用的话它就体现乏力了。所以本人做了一些干活(你也能够以为是小手腕)来让浏览器做自己想要的事。

本文实例讲授了javascript达成简单的全选和反选成效的详实代码,分享给大家供大家仿效,具体内容如下

此处运用AngularJS四大特色之二----双向数据绑定

效果图:

留心:没写一行DOM代码!那正是ng的帮助和益处,bootstrap.css为了布局,JS代码也只是简短创造ng模块和ng调控器

图片 1

效果:

具体代码:

图片 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全选反选</title>
</head>
<body>

  <input type="button" value="全选" id="all">
  <input type="button" value="反选" id="reverse">
  <input type="checkbox" id="flagCheck">
  <ul id="checkboxList">
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
    <li><input type="checkbox"></li>
  </ul>
  <p>
    布尔属性,只要name即可,值可为空
    checked,selected,readonly,disabled....
  </p>
  <script type="text/javascript">
  //1.找节点
  var allBtn = document.querySelectorAll("#all")[0];
  var reverseBtn = document.querySelector("#reverse");
  var flagCheck = document.getElementById("flagCheck");
  var checkList = document.querySelectorAll("#checkboxList input");
  function checkAll() {
    for(var j = 0; j < checkList.length; j++) {
      if(!checkList[j].checked) {
        break;
      }
    }
    if(j == checkList.length) {
      // alert("全部为真")
      flagCheck.checked = true;
    }else {
      // alert("至少一个不为真");
      flagCheck.checked = false;
    }
  }
  //2.加事件
  //全选
  allBtn.onclick = function() {
    if(flagCheck.checked) {
      flagCheck.checked = false;
      for(var i = 0; i < checkList.length; i++) {
        checkList[i].checked = false;
      }
    }else {
      flagCheck.checked = true;
      for(var i = 0; i < checkList.length; i++) {
        checkList[i].checked = true;
      }
    }

  }
  //反选
  reverseBtn.onclick = function() {
    for(var i = 0; i < checkList.length; i++) {
      if(checkList[i].checked) {
        checkList[i].checked = false;
      }else {
        checkList[i].checked = true;
      }
    }
    //执行检查所有checkList是否被选上了
    checkAll();
  }

  for(var i = 0; i < checkList.length; i++) {
    checkList[i].onclick = checkAll;
  }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<title>全选/取消全选</title>
</head>
<body>
<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->
<h2>全选和取消全选</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Tom</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>Mary</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>
<input ng-checked="selectAll" type="checkbox">
</td>
<td>King</td>
<td>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<input type="checkbox" ng-model="selectAll">
全选
取消全选
</div>
<script src="js/angular.js"></script><!--1、引入angularJS-->
<script>
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
</script>
</body>
</html>

但愿本文所述对我们学习javascript程序设计有所帮衬。

ps:AngularJs 简单完结全选,多选操作

你或者感兴趣的文章:

  • JS获得选择checkbox整行数据的法子
  • ExtJS如何设置与收获radio控件的选料状态
  • js选取多个或单个成分的贯彻代码(用class)
  • javascript下包容firefox选拔textarea文本的代码
  • javascript贯彻鼠标接纳拖动或Ctrl选择拖动
  • AngularJS实现全选反选作用
  • js完成checkbox全选、不选与反选的秘技
  • 三种不相同的艺术达成js对checkbox进行全选和反选
  • js落成checkbox全选和反选示例
  • JavaScript选拔(picking)和反选(rejecting)对象的习性方法

过多时候我们在管理CU凯雷德D(增加和删除改查)的时候须要贯彻批量操作数据,那时候就务须利用多选操作。

Angular 中贯彻如下(当然还应该有十分多种比作者写的越来越好的法子,这里只是简短的贯彻。)

HTML:

<section>
<pre>{{choseArr}}</pre>
全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
<div ng-repeat="z in tesarry">
<input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
</div>
<a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a>
</section>

页面效果如下:(CSS采纳bootstrap) 

图片 3

JS代码:

$scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据
$scope.choseArr=[];//定义数组用于存放前端显示
var str="";//
var flag=‘‘;//是否点击了全选,是为a
$scope.x=false;//默认未选中
$scope.all= function (c,v) {//全选
if(c==true){
$scope.x=true;
$scope.choseArr=v;
}else{
$scope.x=false;
$scope.choseArr=[""];
}
flag=‘a‘;
};
$scope.chk= function (z,x) {//单选或者多选
if(flag==‘a‘) {//在全选的基础上操作
str = $scope.choseArr.join(‘,‘) + ‘,‘;
}
if (x == true) {//选中
str = str + z + ‘,‘;
} else {
str = str.replace(z + ‘,‘, ‘‘);//取消选中
}
$scope.choseArr=(str.substr(0,str.length-1)).split(‘,‘);
};
$scope.delete= function () {// 操作CURD
if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示
alert("请至少选中一条数据在操作!")
return;
};
for(var i=0;i<$scope.choseArr.length;i++){
//alert($scope.choseArr[i]);
console.log($scope.choseArr[i]);//遍历选中的id
}
};

你恐怕感兴趣的稿子:

  • JS获得选择checkbox整行数据的不二秘籍
  • ExtJS怎样设置与收获radio控件的选拔状态
  • js选拔四个或单个成分的落到实处代码(用class)
  • javascript下包容firefox选用textarea文本的代码
  • javascript落到实处鼠标采纳拖动或Ctrl选拔拖动
  • javascript贯彻轻便的全选和反选作用
  • js完结checkbox全选、不选与反选的点子
  • 两种区别的法门完毕js对checkbox进行全选和反选
  • js达成checkbox全选和反选示例
  • JavaScript采纳(picking)和反选(rejecting)对象的属性方法

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:AngularJS实现全选反选功能,javascript实现简单的全

关键词: