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 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
js实现幻灯片轮播图
Aug 14 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
php实现的验证码文件类实例
2015/06/18 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Python isinstance函数介绍
2015/04/14 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Django实现自定义404,500页面教程
2017/03/26 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
《散步》教学反思
2014/03/02 职场文书
广告创意求职信
2014/03/17 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
城管大队整治方案
2014/05/06 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
社团招新宣传语
2015/07/13 职场文书
主婚人致辞精选
2015/07/28 职场文书