在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打印复选框选中的内容的更多相关文章

  1. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  2. Jquery获取当前页面中的复选框选中的内容

    在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "< ...

  3. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  4. JS复选框选中

    Web前端之复选框选中属性   熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...

  5. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  6. bootstrap table 复选框选中后，翻页不影响已选中的复选框

    使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...

  7. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  8. Web前端之复选框选中属性

    熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...

  9. Javascript 统计复选框选中个数

    var checked = document.getElementsByName("checked_c[]"); var checked_counts = 0; for(var i ...

随机推荐

  1. [React] Write a Custom React Effect Hook

    Similar to writing a custom State Hook, we’ll write our own Effect Hook called useStarWarsQuote, whi ...

  2. web基本概念

    一.互联网 互联网(英语:Internet),又称网际网络,或音译因特网(Internet).英特网,互联网始于1969年美国的阿帕网.是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连 ...

  3. [matlab工具箱] 神经网络Neural Net

    //目的是学习在BP神经网络的基础上添加遗传算法,蚁群算法等优化算法来优化网络,这是后话. 先简单了解了MATLAB中的神经网络工具箱,工具箱功能还是非常强大的,已经可以拟合出非常多的曲线来分析了. ...

  4. 重写Dijkstra

    啊我沙雕了,竟然以为DJ的邻接矩阵不用初始化.. #include<bits/stdc++.h> #define R register int using namespace std; / ...

  5. Java枚举类接口实战

    枚举类可以实现一个或多个接口.与普通类实现接口完全一样,枚举类实现接口时,需要实现该接口所包含的方法. 如果需要每个枚举值在调用同一个方法时呈现不同的行为,则可以让每个枚举值在{...}匿名块中实现自 ...

  6. 理解 ES6 语法中 yield* 关键字的作用

    在 ES6 中新增了生成器函数的语法,本文解释了与生成器函数有关的 yield* 关键字,及其使用场景. 描述 根据语法规范,yield* 的作用是代理 yield 表达式,将需要函数本身产生(yie ...

  7. [WC2010]重建计划（长链剖分版）

    传送门 Description Solution 时隔多年,补上了这题的长链剖分写法 感觉比点分治要好写的多 我们假设\(pos\)是当前点的\(dfn\),它距离所在链的底端的边的数量是\(len\ ...

  8. [代码审计]PHP_Bugs题目总结(2)

    写的有点多了,上一篇放在一起显得有点臃肿,就再起一篇吧~ 迷路的老铁点这里:[代码审计]PHP_Bugs题目总结(1) 0x14 intval函数四舍五入 <?php if($_GET[id]) ...

  9. Linux 搜索查找类指令

    一.find  指令 find 指令将从指定目录向下递归遍历其各子目录,将满足条件的文件或者目录显示在终端. 基本语法 find  [搜索范围]  [选项] 选项说明 -name            ...

  10. JavaScript 如何工作的: 事件循环和异步编程的崛起 + 5 个关于如何使用 async/await 编写更好的技巧

    原文地址:How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding wi ...