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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
Angular实现的进度条功能示例
Feb 18 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
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
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP goto语句用法实例
2019/08/06 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
在Python中使用成员运算符的示例
2015/05/13 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Python多进程原理与用法分析
2018/08/21 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
个人简历自我评价八例
2013/10/31 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
任长霞观后感
2015/06/16 职场文书