一览画面点击复选框后获取多个id值的方法,JS判断复选框checkbox是否选中并实时显示

修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,line17-line26

在web开辟中临时会碰到一览画面中每一条记下前都带三个复选框,点击后选中该条记录进行删减、修改、查看等操作。

第一来探视轻便的功用图,如下所示:

修改和查阅都是获取一条记下的id值后传递到后台实行询问获得该记录对象的各个属性值,再展现到画面上。

图片 1

自己说的重要性是选中多条记下后张开批量刨除,怎样获得多条记下的id值是主题材料的严重性。首先是在jsp页面中全选中复选框的主意。

看一下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>
function checkEvent(name, allCheckId) { 
var allCk = document.getElementById(allCheckId); 
if (allCk.checked == true) 
checkAll(name); 
else 
checkAllNo(name); 
} 
//全选 
function checkAll(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
if(!names[i].disabled){ 
names[i].checked = true; 
} 
} 
} 
//全不选 
function checkAllNo(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
names[i].checked = false; 
} 
} 

line2 定义了AngularJS App;

调用该方法的jsp代码:

line4 引入angularjs脚本;

<input name="checkAll" id ="checkAll" onclick="checkEvent('chooseFaqId','checkAll')" type="checkbox"/></td> 

line5 引进自己写的script2.js脚本;

其中,chooseFaqId是复选框的name属性值,checkAll是表头复选框的name属性值。

line7 内定调控器AddStyleCtrl

前台具体实施批管理的js代码,须求对中选的记录id值用逗号分隔,删除批管理方法代码如下:

line13-15 实时展示已选标签给客户看;

function batchDeletechFaq(idStr){ 
var ids="'"; 
$("input[name='chooseFaqId']").each(function(){ 
if(this.checked){ 
ids+=this.value+"','" 
} 
}); 
ids+="'"; 
ids=ids.replace(/,''/g,''); 
if(ids=="''"){ 
jqDialog.alert("<s:text name='faqManage.pleaseSelectFaq'/>"); 
return; 
} 
$.ajax({ 
type:"POST", 
url:"admin/faqManageAction!batchDeleteFaq.action", 
data: {chooseFaqId: ids}, 
dataType: "text", 
success:function(html){ 
if(html=="success"){ 
jqDialog.alert("<s:text name='faqManage.OperationWasSuccessful'/>",function(){ window.location.href = window.location.href.replace(/#/g,''); 
}); 
} else { 
jqDialog.alert("<s:text name='faqManage.OperationFailedPleaseTryLater'/>"); 
} 
} 
}); 
}); 
} 

line17-line26
使用重复循环列出数据库(本例中就存款和储蓄在了controller的三个指标里)中的数据;

后台获取前台传回的一组id值

  line21的那行代码成效可大了:<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">

final String ids = this.getRequest().getParameter("chooseFaqId"); 

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

本来获取选中的一组id选用的是以下办法:

  假若想 ng-click 触发的函数里获取到该触发该函数的成分不可能一贯传入
this ,而必要传入
event。因为在Angularjs里面,这几个地点的this是event。因为在Angularjs里面,那几个地方的this是scope
。我们能够流传
event,然后在函数里面通过event,然后在函数里面通过event.target来赢获得该因素。

final String ids = this.getRequest().getParameterValues("chooseFaqId"); 

line29-30
是测量检验时候给自个儿看的,能够见见selected数组和selectedTags数组中的内容;

这么能够一贯获得三个字符串数组,不需求展开任何编辑操作。后来由于何种原因改成今后的章程有一点点记不清了。

接下来看看AngularJS代码:(script2.js)

终极是后台BO层施行删除的代码:

/**
 * 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;
 }
});
/** 
* 根据ID批量删除FAQ问题 
* @param faqAnswer 
* @return 
*/ 
public void batchDeleteFaq(final String ids){ 
final String hql = "delete from FAQAnswer o where o.id in ("+ids+")"; 
faqManagerDao.execute(hql); 
}

line6 定义了angular app;

小结,笔者利用的是ajax提交情势,点击批量刨除按键后,首先决断客商是或不是至少选中了笔录,不然弹出提示信息。选中后点击删除开关执行后台方法。假如实施操作失败弹出操作失败消息框。

line10 定义了调节器AddStyleCtrl;

上述所述是小编给我们介绍的一览画面点击复选框后获得五个id值的秘诀,希望对我们享有援助,如若大家想精通越来越多音信敬请关心脚本之家网址!

line12-63 定义了 标签对象

你可能感兴趣的小说:

  • Extjs改换树节点的勾选状态点击开关将复选框去掉
  • jQuery实现开关的点击 全选/反选 单选框/复选框 文本框
    表单验证
  • JS达成点击复选框将开关或文本框变为士林蓝不可用的方法
  • js点击文本框弹出可挑选的checkbox复选框

line64,66
证明了$scope中的五个数组对象(能够统一为1个),分别用来存款和储蓄tag的id和name;

line68-78 定义了updateSelected方法,这些方法会被updateSelection调用;

  line69-72:如果add操作且 ‘数组[id]’
成分不设有,向数组中添增添少(id,name);

  line73-77:如果remove操作且‘数组[id]’
成分存在,从数组中剔除数据(id,name);

line80-84概念了updateSelection方法,这几个方法会在html页面包车型大巴checkbox被点击时调用;

  line81经过$event变量来获取点击的dom成分;

  line82通过checkbox的当前景象来调节是add操作依旧remove操作;

  line83调用updateSelected方法,更新数据;

line86-88定义了isSelected方法,用来判别ID为id的checkbox是或不是被选中,然后传值给页面包车型大巴ng-checked指令;

总结

如上正是那篇文章的全体内容了,希望本文的从头到尾的经过对我们的就学可能职业能拉动一定的支持,即使有疑点款待大家留言调换。

作者: ZH奶酪——张贺
Q Q: 1203456195
邮箱: cheesezh@163.com
出处:
>http://www.cnblogs.com/CheeseZH/

您恐怕感兴趣的稿子:

  • JS实现复选框的全选和批量剔除功用
  • js html
    css完结复选框全选与反选
  • JS获取复选框的值,并传递到后台的兑现方式
  • js点击文本框弹出可选用的checkbox复选框
  • JS完成CheckBox复选框全选、不选或全不选功能
  • jQuery选用全部复选框被选中的值并用Ajax异步提交数据的实例
  • JavaScript 通过Ajax
    动态加载CheckBox复选框