js动态获取子复选项并设计全选及提交的实现方法


Posted in Javascript onJune 24, 2016

在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台

本章将讲述如何通过js控制实现该操作:

1:设计父类别为radio,为每一个radio都加上onclick事件,并默认类别1为选择状态。

<input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked="checked"/>全选<br>
<input type="radio" name="lb" id="lb" value="1" onclick="getZlb(1);" checked="checked"/>类别1 
<input type="radio" name="lb" id="lb" value="2" onclick="getZlb(2);"/>类别2 
<input type="radio" name="lb" id="lb" value="3" onclick="getZlb(3);"/>类别3

2:页面初加载时,要根据选中的父类别显示子类别,在点击按钮时,也要获取子类别,故写成同一个方法,并在页面加载结束后调用

window.onload=getZlb();

3:获取子类别的js方法,通过ajax方法动态获取后台数据

/**
 * 获取子类别,在页面加载结束后也执行显示
 */
 function getZlb(){
  //通过名字获取
  var obj = document.getElementsByName("lb");
    for(var i=0; i<obj.length; i ++){
      if(obj[i].checked){
        getZlbNews(obj[i].value);
      }
  }
 }

function getZlbNews(){
    (通过Ajax获取map类型的数据;返回数据为result,json格式)
    var json = eval("("+result+")"); //转化为json对象
    //通过ID获取子类型要显示的区域
    var parent=document.getElementById('xsqy');
    //把子区域置空,防止下次追加
    parent.innerHTML='';
    var p=0;
    var span="";
    //把全选打上勾
    document.getElementById("selectall").checked=true;
    for(var i in json){
     p++;
     span="<SPAN style=\"display:inline-block; width: 75px;\"><input type=\"checkbox\" checked=\"checked\" onClick=\"checkSelectAll();\" name=\"zlb\" value=\""+i+"\">"+json[i]+"</SPAN>";
     //当子复选框超过11个,则换行
     if(p%11==0){
       span=span+"<br>";
     }
     //把子复选框一个个追加到子区域
     parent.innerHTML=parent.innerHTML+span;
    } 
}

4:后台逻辑,

/**
   * 通过子类别,返回Map格式 Map<代码,名称>
   * @return
   */
  public String getZLb(){
    Map<Integer, String> zlb=service.getZLB();
    //把map转化为json格式
    JSON a= JSONSerializer.toJSON(zlb);
    return a.toString();
  }

5:js控制全选,及全选是否选中的逻辑,及提交时如何合并选中的代码

/**
  * 全选或是全部取消
  */
 function selectAllDz(){
   var checkboxs = document.getElementsByName("zlb");
   for(var i=0; i<checkboxs.length; i++) {


//根据全选的按钮是否选中来控制子类别是否选中
     checkboxs[i].checked = document.getElementById("selectall").checked;
   }
 }
/**
 * 判断子类别是否全选,是全选则全选按钮选中,否则不选中
 */
 function checkSelectAll(){
   var checkboxs = document.getElementsByName("zlb");
   var isSelectAll=true;
   for(var i=0; i<checkboxs.length; i++) {
     if(checkboxs[i].checked ==false){
       isSelectAll=false;
     }
   }
   if(isSelectAll==false){
     document.getElementById("selectall").checked=false;
   }else{
     document.getElementById("selectall").checked=true;
   }
 }
/**
* 拼接选中的ID,以逗号分隔
**/
function getAllIdStr(checkName){
  var select = document.getElementsByName(checkName);
   var idStr = new Array();
   for(var i=0; i<select.length; i++){
     if(select[i].checked==true){
       idStr = idStr.concat(select[i].value);
     }
   }
   return idStr.join(',');
}

6:在进行下一步操作时,如提交时,把全选的变成一个字符,赋值给一个隐藏的文本框,用来提交到后台

//调用拼接ID的方法,把要操作的元素名字传过去
var allZlb=getAllIdStr('zlb');
//创建一个隐藏的文本框,把拼接后的赋之,用于后台获取
document.getElementById('allZlbStr').value=allZlb;

以上只是个人拙见,如有更好的处理建议,请告知。

以上就是小编为大家带来的js动态获取子复选项并设计全选及提交的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
javascript解析json数据的3种方式
May 08 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
layui选项卡效果实现代码
May 19 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
正则表达式(语法篇推荐)
Jun 24 #Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 #Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 #Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 #Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 #Javascript
再次谈论Javascript中的this
Jun 23 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
php使用curl发送json格式数据实例
2013/12/17 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript类型转换示例
2014/04/29 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python正则表达式介绍
2012/08/06 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python hmac模块使用实例解析
2019/12/24 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
个人委托书范本
2014/04/02 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript