曾几何时，check框还是我熟悉的那个check框。它外貌丑陋
它学会了挖坑（大坑）。我经常不小心掉进它的坑里，花n久才能爬出来，然后想把它暴揍一顿。但下次不小心还会掉进坑里。
于是我要记录下check框的罪行，让大家引以为鉴，不要再受蒙骗。
，在看到OA中显示模板的check框的时候，你一定会觉得：哎呦，check框变漂亮的呢！ 在我们搭建流程，建立表单的时候，我们会遇到一种字段类型，check框，也就是我们常说的复选框。它一般会有两种结果，勾选或不勾选。
但没有人会无缘无故的变漂亮，check框也是！当我们打开f12查看源码，你就会发现光一个check框，就是由好几个html标签组合的。
（此代码节选自编辑状态下）（为了聚焦关注点，以下代码中删减了标签部分属性）
外部两层span我们可以先忽略。我们现在关注的重点放在input标签和它下面的span标签。
如果你对css有了解，你可以去看看样式代码，你会发现编辑状态下，input标签是不显示的。他只是用来存值的，这样方便提交表单的时候往数据库中写数据。而我们目前的关注重点应该放在 这个上面，如果你对css有了解，我送你一行关于这个span的css语句：
background: transparenturl(elements/checkbox_wev8.gif) no-repeat center top;
看不懂css的也没关系，我给你们讲下，这个语句的最主要的意思就是：
给span标签一个背景图。所以我们看到的那个美丽的check框，它就是个图！就是个图！就是个图！（重要的事情说三遍！）
大家喜欢若隐若现的仙女，于是check框东施效颦，在打印的时候经常闹失踪。询问了一些人后，终于在打印的时候，找到了揪出这个闹心孩纸的方法。
如果你设置了打印模板，打印的时候，可能会存在无法看到勾选框的情况。别担心！左侧设置，找到背景图形，勾上，勾选框就出来了。
你绕过了一个坑，又有另一个坑，这个东西就这么坑……吃俺老孙一棒！（请按西游记片头曲演唱）
你以为你可以简简单单的，在任何情况下获得check框的值？No no no。
我们先回忆下刚才我们看过的，显示模板-编辑状态下的结构。（为了聚焦关注点，以下代码中删减了标签部分属性）编辑状态下我们可以通过获得field1234的checked属性，来看是否勾选。同时控制span来控制展示的check框的样式。
下面我们来看显示模板-只读状态下的结构。（为了聚焦关注点，以下代码中删减了标签部分属性）只读状态下我们可以通过控制获得field1234的value值，0为未勾选，1为勾选，来看是否勾选。同时控制span来控制展示的check框的样式。
至于显示模板的必填状态下结构和编辑状态是类似的，就不在此特别说明了。
上面讲的是显示模板不同状态下的check框结构不同。但移动模板和显示模板还存在不同呢！我们接下来看看移动模板的编辑。（为了聚焦关注点，以下代码中删减了标签部分属性和td的父级节点）我们可以看出来移动模板的就是使用原生check框。id为field1234的元素是展示，而隐藏的name为field1234的元素这是用来记录存入数据库的值。
接着我们看看移动模板的只读。（为了聚焦关注点，以下代码中删减了标签部分属性和td的父级节点）就比编辑状态多了一个disabled而已。
document.getElementById("field1234").onchange = function () { alert(1) };
$("#field1234").change(function () { alert(1) });
以上这种语法是不可以正常执行的，虽然语法没错。。。
我原以为是在执行onchange后某个位置，有代码阻止事件冒泡。可是我一句一句的查，终于发现了原因。首先系统是给那个其实是图片的span加入了点击事件，当点击后，会触发以下代码。
jQuery(input).trigger("click");//让checkbox执行点击事件
input.checked = !input.checked;//更改checkbox的checked属性
因为jquery的trigger。所以最终只会触发checkbox的原生事件和jquery绑定的click事件，所以其他的jquery绑定的事件都不会执行。
document.getElementById("field1234").onchange = function () { alert(1) };
$("#field1234").change(function () { alert(1) });
$("#detailDiv_0").delegate("input[id^='field1234_']","change", function(){ });//通用
$("#detailDiv_0 input[id^='field1234_']").change(function(){ alert(1); });// 修改已有的check框
$("#detailDiv_0").delegate("input[id^='field1234_']","change", function(){ });
$("#field1234").is(":checked"); //true勾选 false不勾选
$("#field1234").val(); //0勾选 1不勾选
$("#field1234").is(":checked"); //true勾选 false不勾选
$("#field1234").is(":checked"); //true勾选 false不勾选
$("#field1234_0").is(":checked"); //true勾选 false不勾选
$("#field1234_0").val(); //0勾选 1不勾选
$("#field1234_0").is(":checked"); //true勾选 false不勾选
$("#field1234_0").is(":checked"); //true勾选 false不勾选
$("#field1234").attr("checked", true); //input
$("#field1234").next().addClass("jNiceChecked");//勾选框的展示部分
$("#field1234").attr("checked", true); //展示
$("input[name='field1234']").val(1); //数据库存值
$("#field1234_0").attr("checked", true);
$("#field1234_0").attr("checked", true); //展示
$("input[name='field1234_0']").val(1); //数据库存值
$("div[name='hiddenEditdiv'] #field1234_0").attr("checked", true); //点击行后新出现的区域中展示
$("div[name='hiddenEditdiv'] input[name='field1234_0']").val(1); //点击行后新出现的区域中存值
2、设置打印模板后，勾选框不出现，可以勾选左侧的背景图案，即可展示出来；
Check框虽然有很多需要注意的地方，但如果你耐心的面对它，它还是一个温顺的小绵羊。这次的内容就到这里呦。下次记得调整好呼吸，大批代码即将来袭
来源：泛微华南发布日期2020-05-22 08:36浏览：
1个目标提供最好的协同管理软件产品
16年专注协同软件的研发与服务
86个行业全方位提供行业解决方案
100多家机构全国布局本地化服务
10000家客户行业覆盖率广规模全国领先
关于盗用我公司名义进行网上推广活动的声明
