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获得下拉框值的代码
Aug 13 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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防攻击代码升级版
2010/12/29 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
房屋租赁协议书
2014/10/18 职场文书
演讲开场白和结束语
2015/05/29 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android