注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

晨读平台开发心得——订阅联级复选框实现  

来自沈超楠   2016-12-13 10:31:09|  分类: 默认分类 |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在加入小组的晨读平台开发小组后,我完成了订阅模块,在完成订阅模块时,前端订阅页面联级复选框的实现花费了一定的时间,觉得对此作一定的总结,会方便以后对于此类复选框的功能实现。
如下图所示,订阅模块的复选框是一种联级复选框,不仅需要实现可以统计复选框的选择结果、预设复选框的状态,也需要实现两级复选框的选择关系:父复选框选中子复选框也全部自动选择、子复选框取消选中父复选框也取消选中、子复选框全部选中父复选框也自动选中。
晨读平台开发心得——订阅联级复选框实现 - 网易杭州QA - 网易杭州 QA Team
 在此次实践中,我将所有这些功能全部都在前端实现,主要由js完成。
在实现父子复选框联级关系时,主要利用了两个函数,第一个函数是AllSelect(father,son),主要实现当父复选框选中时,子复选框也全部选中的功能,其中两个参数father和son分别是父复选框的name和所有子复选框的name。

function AllSelect(father,son)
{
var father_item = document.getElementsByName(father);
var son_items = document.getElementsByName(son);
for (var i = 0; i < son_items.length; ++i)
{
if (father_item[0].checked)
{
son_items[i].checked = true;
}
else
{
son_items[i].checked = false;
}
}
}

第二个函数是sonSelect(father,son),其中两个参数father和son也分别是父复选框的name和所有子复选框的name,主要实现子复选框取消选中父复选框也取消选中、子复选框全部选中父复选框也自动选中这两个功能。

function sonSelect(father,son)
{
var father_item = document.getElementsByName(father);
var son_items = document.getElementsByName(son);
var childStatus = true;
for (var i = 0; i < son_items.length; ++i)
{
childStatus = (childStatus && son_items[i].checked);
}
if (childStatus)
{
father_item[0].checked = true;
}
else
{
father_item[0].checked = false;
}
}

此外用于统计选中状态的js函数为which_selected(fathers),其中参数fathers为后端传回来的所有父子复选框内容的数组,然后根据这些father的name和son的name去找相应的复选框,统计他们的状态,组成一个复选框结果的数组的result(html中设置了父子复选框name的相关性,所以这里可以实现)。

function which_selected(fathers)
{
var result = [];
for (var i = 0; i < fathers.length; ++i)
{
var v_item = document.getElementsByName(fathers[i]['name']);
if(v_item[0].checked){
result.push(fathers[i]['id']);
}
for(var j = 0; j<fathers[i]['sons'].length;j++){
var items = document.getElementById(fathers[i]['sons'][j]['id']);
if(items.checked){
result.push(fathers[i]['sons'][j]['id']);
}
}

}

var result1 = result.join(',');
}

在前端html页面上的复选框实现如下:

{% for father in all_tags %}
<input type="checkbox" name="{{father.name}}" value="test" onclick="allSelect('{{father.name}}',{{father.id}})" {% if father.status == 1 %}checked="checked"{% endif %}>{{father.name}}</p>
<ul>
{% for son in father.sons %}
<p> <input type="checkbox" id="{{son.id}}" name="{{father.id}}" value="layer1" onclick="singleSelect2parent('{{father.name}}',{{father.id}})" {% if son.status == 1 %}checked="checked"{% endif %}>{{son.name}}</p>
{% endfor %}
</ul>
{% endfor %}
<p><input id="btnOperate" type="button" class="btn btn-primary" value="选择" onclick="which_selected({{all_tags}})" /></p>

也是利用服务器传回来的数据来控制复选框的数量和复选框已有的状态,这样就可以自动控制复选框数量和状态,需要注意的是这里的父复选框的name是父亲的名字,子复选框的name是父复选框的id,这样就可以方便地控制父子复选框的关系,然后子复选框的唯一标识由子复选框的id控制,此id为服务器传回来的son的id,此处并没有需要利用到这一点,只是为了说明能够做到。
这样就实现了订阅页面的联级复选框,需要编写的内容很少,而且无论后端有多少数据都不会影响,也实现了联级复选框的联级功能,非常实用,希望对大家有帮助~
  评论这张
 
阅读(77)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017