【JS新手教程】LODOP打印复选框选中的内容
在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印。
给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的value值。
document.getElementsByName(设置的name的值);返回的是指定该name名称的对象的集合
获取该集合的长度用.length,在JS和很多其他计算机语言中.length都是长度,也就是个数,是自然数,和索引从0开始数不同,长度是实际的个数。例如本文例子中,name为hob的集合的length长度是5,也就是页面的5个name为hob的checkbox。
获取某个checkbox是否被选中,用checked属性判断,获取某个checkbox的值,用.value获取。
该博文用了两种方法,第一种:name获取组,通过id逐个赋值:
1.每个checkbox加name和id,name设置一样的为一组。
2.根据name获取这一组的checkbox对象,循环通过id赋值。
第二种:一组放一个div,获取该div中全部input,通过数组下标,逐个获取对象的值,赋值。
1.把需要为一组的checkbox放一个div,给div取个名。
2.获取div全部的input对象,通过数组下标循环赋值。
简单点说,该博文用的是两种获取所有对象的方法,两种获取单个对象的方法。
获取所有对象的方法:1.通过document.getElementsByName,获取全部同name名的对象。
2.div对象.getElementsByTagName,通过div分区,所有checkbox用div包裹起来,获取全部input对象。
获取一个对象的方法:1、设置不同的id,用id获取。2、用数组下标。
如图,页面放5个复选框,然后循环判断每个复选框是否选中,选中的就给字符串strhob加字符串,最后返回加好后的字符串。
页面有个文本框,输入的是名称,然后把名称和选择的打印项组合起来,赋给LODOP的一个文本项。第二组的赋给第二个打印项。
都拼接起来给一个text可以,给两个也可以,这里既然是两组不同的,就给两个text纯文本打印项。
测试代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
输入选择人名:<input type="text" id="T1"><br>
<hr>
选择号:
<input type="checkbox" id="CK0" name="hob" value="A号">A号
<input type="checkbox" id="CK1" name="hob" value="B号">B号
<input type="checkbox" id="CK2" name="hob" value="C号">C号
<input type="checkbox" id="CK3" name="hob" value="D号">D号
<input type="checkbox" id="CK4" name="hob" value="E号">E号
<hr>
<div id="hom">
选择码:
<input type="checkbox" value="1234">1234
<input type="checkbox" value="3456">3456
<input type="checkbox" value="6543">6543
<input type="checkbox" value="0987">0987
<input type="checkbox" value="0384">0384
<hr>
</div>
<a href="javascript:prn1_preview()">打印选择的号码</a><br>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function Retnhob() {
var strhob="选择的号是:";
obj_allhob=document.getElementsByName("hob");
var hlen=obj_allhob.length;
for (i=0;i<obj_allhob.length;i++) {
if (document.getElementById("CK"+i).checked) {
strhob=strhob+document.getElementById("CK"+i).value;
}
}
return strhob;
};
function Retnhom() {
var strhom="选择的码是:";
var div_hom=document.getElementById("hom");
var obj_allhom=div_hom.getElementsByTagName("input");
var hlen=obj_allhom.length;
for (i=0;i<obj_allhom.length;i++) {
if (obj_allhom[i].checked) {
strhom=strhom+obj_allhom[i].value+"|";
}
}
strhom=strhom.substring(0,strhom.length-1);
return strhom;
};
function prn1_preview() {
LODOP=getLodop();
var dtt=Retnhob();
var dtm=Retnhom();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_TEXT(28,41,200,22,document.getElementById("T1").value+dtt);
LODOP.ADD_PRINT_TEXT(58,41,200,22,document.getElementById("T1").value+dtm);
LODOP.PREVIEW();
};
</script>
</body>
图示:
【JS新手教程】LODOP打印复选框选中的内容的更多相关文章
- 【JS新手教程】LODOP打印复选框选中的任务或页数
之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...
- Jquery获取当前页面中的复选框选中的内容
在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "< ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- JS复选框选中
Web前端之复选框选中属性 熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- bootstrap table 复选框选中后,翻页不影响已选中的复选框
使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Web前端之复选框选中属性
熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...
- Javascript 统计复选框选中个数
var checked = document.getElementsByName("checked_c[]"); var checked_counts = 0; for(var i ...
随机推荐
- 面试官常问的20道Java题目(附答案)-来自Java1234
1. 以下代码的输出结果是(A) int i =3; i = i++; System.out.println(i); A .3 B.4 C.5 a=b++是先将b值赋值给a后b再自增. 2. Ma ...
- 2017.10.5 国庆清北 D5T1 拼不出的数
题目描述 3 个元素的集合{5,1,2}的所有子集的和分别是0,1,2,3,5,6,7,8.发现最小的不能由该集合子集拼出的数字是4. 现在给你一个n个元素的集合,问你最小的不能由该集合子集拼出的数字 ...
- 说明os,sys模块有什么不同
官方解释: os: This module provides a portable way of usingoperating system dependent functionality. 翻译:提 ...
- C 库函数 - strstr()
定义 char *strstr(const char *haystack, const char *needle) 参数 haystack -- 要被检索的 C 字符串. needle -- 在 ha ...
- SSH如何使用
如何查看SSH服务是否已经安装? 在终端命令行执行 rpm -qa | grep "ssh" 执行结果请看下图,说明已经安装:其实在安装linux操作系统的时候默认就会安装上的. ...
- vue+vue-resource设置请求头(带上token)
前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...
- lol英雄时刻
2019.5.30 翻出了当年人生中第一次LOL五杀截图...我用佐伊拿五杀了! 第一次五杀超激动的
- 三大框架 之 Spring(IOC控制反转、DI依赖注入)
目录 常用词汇 left join与left outer join的区别 Struts2的标签库导入 Spring Spring概述 什么是Spring spring特点 下载 IOC 什么IOC 传 ...
- T-MAX-冲刺总结
T-MAX-冲刺总结 这个作业属于哪个课程 班级链接 这个作业要求在哪里 作业要求的链接 团队名称 T-MAX 这个作业的目标 冲刺总结 作业的正文 T-MAX-冲刺总结 其他参考文献 面向B站,百度 ...
- 深度学习面试题11:池化(same池化、valid池化、带深度的池化)
目录 Same最大值池化 多深度的same池化 Same平均值池化 Valid池化 参考资料 池化(Pooling)操作与卷积类似,取输入张量的每个位置的矩形领域内的最大值或平均值作为该位置的输出. ...