关于根据数据反选checkbox
前两天完成了一个连接hbase数据库的mis系统,mis系统中经常需要修改功能,复选框、多选框等等的自动勾选,感觉很麻烦,在此记录一下修改功能checkbox自动选中。
例子:
<div class="col-sm-12">
<ul class="row-fluid clearfix listpage-tab" role="tablist"
id="wtfy-tab" style="margin-bottom: 20px;">
<li role="presentation" class="col-sm-3 col-xs-4" ><a
class="btn btn-md btn-primary btn-block btn-alpha" type="radio" checked="checked" name="cxdmd" href="void(0)" onclick="displayLxcx('0');"
role="tab" data-toggle="tab" >立项查新</a></li>
<li role="presentation" class="col-sm-3 col-xs-4" ><a
class="btn btn-md btn-primary btn-block btn-alpha" type="radio" name="cxdmd" href="void(0)" onclick="displayLxcx('1');"
role="tab" data-toggle="tab" >成果查新</a></li>
<li role="presentation" class="col-sm-3 col-xs-4" ><a
class="btn btn-md btn-primary btn-block btn-alpha" type="radio" name="cxdmd" href="void(0)" onclick="displayLxcx('2');"
role="tab" data-toggle="tab" >其他查新</a></li>
</ul>
<div id="ds">
<div id="lxcx0" name="xuanze" class="checkbox" type="radio" checked="checked">
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="1"/><1>项目申报(国家级、省部级、学协会、其他)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="2"/><2>中小企业创新基金(研发阶段、小试-中试、市场推广)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="3"/><3>新产品
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="4"/><4>技术引进
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="5"/><5>技术吸收与创新
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="6"/><6>其他
</label>
</div>
</div>
<div id="lxcx1" name="xuanze" class="checkbox" type="radio" style="display:none">
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="7"/><7>成果鉴定
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="8"/><8>高新技术成果转化
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="9"/><9>申报奖励(国家级、省部级、学协会、其他奖励)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="10"/><10>高新技术企业认定
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="11"/><11>其他
</label>
</div>
</div>
<div id="lxcx2" name="xuanze" class="checkbox" type="radio" style="display:none">
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="12"/><12>博士论文开题
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="<13>申报专利"
/><13>申报专利
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="position" value="<14>其他"
/><14>其他
</label>
</div>
</div>
</div>
</div>
这是一个有三个按钮组成的checkbox集合,效果:点击不同的按钮显示不同的checkbox
在修改页面,我们需要根据数据点击按钮并且勾选相应多选框。
由上面的代码可知,我们设置的value为数字,在之前,我习惯于数据是什么,我的value就是什么,但是这种情况,建议使用数字,或者其他的,我们可以根据数字在js中判断。
插入的数据我是用逗号分隔开的,所以获取第一个数字,根据数字让js判断click哪一个按钮,根据split拿到的集合遍历并勾选多选框。
var data="<%=user.getPosition()%>".split(",");
var num=data[0];
if(num<=6) {
document.getElementById("quick").click();
}
else if(num<=11&&num>=7){
document.getElementById("get").click();
}
else if(num>11){
document.getElementById("other").click();
}
//获取页面所有checkbox(checkbox的name设置一致)
for(var i=0;i<items.length;i++){
//当前checkbox实现勾选
for(var j=0;j<data.length;j++) {
if (data[j] === items[i].value)
items[i].checked = true;
}
}
效果:
点击编辑:
页面来源:中国科学院文献情报中心-科技查新平台
如有侵权,请评论留言
关于根据数据反选checkbox的更多相关文章
- Jquery全选与反选checkbox(代码示例)
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- 依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)
近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...
- 转发!HTML 复选框 checkbox 的 JavaScript 的全选和全反选
checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...
- checkbox全选,反选,取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- checkbox 全选,反选 ,全不选
在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- EasyUI datagrid checkbox数据设定与取值(转自http://blog.csdn.net/baronyang/article/dnetails/9323463,感谢分享,谢谢)
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...
随机推荐
- JZ-060-把二叉树打印成多行
把二叉树打印成多行 题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目链接: 把二叉树打印成多行 代码 import java.util.ArrayList; impor ...
- 【架构】从instagram学习最小化IT是怎么做的
Keep it very simple (极简主义) Don't re-invent the wheel (不重复发明轮子) Go with proven and solid technologies ...
- laravel 7 xlsx 数据导入至 数据库
网址: https://learnku.com/articles/32400 1:安装插件 环境要求 PHP: ^7.0 Laravel: ^5.5 安装方式 composer require maa ...
- js格式化树形数据(扁平化数据)
需求: 1.把如下数据按照parent_id等于id的规则建立父子关系 2.同一层级的数组按照order升序 [ { "id": 1, "name": &quo ...
- AT1219题解
题意 设 \(a\) 的价值为 \(a \times cnt_a\)(\(cnt_a\) 为 \(a\) 在区间中出现的次数),求区间种某种元素,使得这种元素的价值最大. 因为设计出现元素的次数,所以 ...
- LGP4451题解
题意明确,不再阐述( 首先,众所周知的是 斐波那契数列 的生成函数是 \(F(x)=\frac x {1-x-x^2}\) 那么答案就是 \(\sum_{i=0} F^i(x) = \frac 1 { ...
- 一次苦逼的SQL注入
0x01: 偶一打点,看到一个可爱的系统-. 1.通过F12 把链接提出来仔细瞅瞅- 2.看见id,果断测注入- 感觉有戏 嗯? 啥数据库连接出错,啥意思??? (其实,这是运维做的混淆..) 3.这 ...
- linux下yum无法安装lrzsz,Error: Failed to download metadata for repo ‘appstream‘: Cannot prepare internal
镜像下载.域名解析.时间同步请点击阿里云开源镜像站 linux虚拟机上准备安装一下rz sz,执行yum命令后提示如下: [root@tony001 ~]# yum install lrzsz Cen ...
- 记录Markdown的学习
目录 1. 引言 2. 标题 这是一级标题 这是二级标题 这是三级标题 这是四级标题 3. 文字相关 3.1 粗体 3.2 斜体 3.3 粗体和斜体 3.4 删除线 3.5 混合使用 3.6 反引号引 ...
- ubuntu开启emqx/nginx/uwsgi自启动服务
一.emqx开机自启 a.首先在执行如下命令 vi /lib/systemd/system/emqx.service 创建了emqx.service文件然后在文件中写入如下内容 [Unit] Des ...