今天小编在帮着兄弟组做需求的时候，发现他们的系统基本上用的是Jquery来进行页面元素的操作的，需求是加一个全选的checkbox，进行全选和全部选的操作，对于我这种不思进取的二愣子，早已把Jquery忘到九霄云外，今天再看到，就一种感觉：少年不知Jquery，老来望其空流泪！书到用时方恨少，一拍脑门玩个鸟。抱怨归抱怨，那也不能做咸鱼嘛，毕竟二愣子也是有梦想的二愣子，翻翻资料，把这个功能交了差，也意识到自己的缺乏，没办法，人丑若是不读书，都娶不到媳妇，毕竟家里催得紧
言归正传，直接上需求：
功能很简单，就是主要就是加了我框出来的复选框，用来控制其以下的全部选中操作，but，要避开置灰的“哥们”
需求分析：
当点全选时，选中下边div中所有不包含置灰的复选框
注：这块的内容我是放在div中的
因为有好几个地方要用到，所以我单独写了两个页面，专门放全选这块，内容，直接使用
废话不多说，直接上代码
准备用于引入的代码段
checkbox-util-in.htm
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Insert title here</title>
<link href='css/font.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgcore.min.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgdialog.min.js"></script>
</head>
<body>
<span><input class="yhjb" type="checkbox" id="allIn" /> 全选</span>
</body>
</html>
checkbox-util-out.htm
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Insert title here</title>
<link href='css/font.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgcore.min.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgdialog.min.js"></script>
</head>
<body>
<span><input class="yhjb" type="checkbox" id="allOut" /> 全选</span>
</body>
</html>
原始需要修改的页面代码
<div>
<div style="font-weight: bolder;">住院基本信息: <%@include file="/util/checkbox-util-in.htm" %></div>
<div id="div-in">
<label><input class="yhjb" type="checkbox" name="jbxx" id="gender" value="gender" mean='性别' />性别</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="age" value="age" mean='年龄' />年龄</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="MARRIAGE_STATUS_CODE" value="MARRIAGE_STATUS_CODE" mean='婚姻状况' />婚姻状况</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="OCCUPATION" value="OCCUPATION" mean='职业' />职业</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="location" value="location" mean='现住址' />现住址</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="birthday" value="birthday" mean='出生日期' />出生日期</label>
<br/>
<label><input class="yhjb" type="checkbox" name="jbxx" id="ADMISSION_TIME" value="ADMISSION_TIME" mean='入院日期' disabled="disabled" checked="checked"/>入院日期</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="ADMISSION_DEPT_CODE" value="ADMISSION_DEPT_CODE" mean='入院科室' />入院科室</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="ADMISSION_WARD_CODE" value="ADMISSION_WARD_CODE" mean='入院病区' />入院病区</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="GCDoctor" value="GCDoctor" mean='管床医生' />管床医生</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="ZZDoctor" value="ZZDoctor" mean='主治医生' />主治医生</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="ZLZZDoctor" value="ZLZZDoctor" mean='医疗组长' />医疗组长</label>
<br/>
<label><input class="yhjb" type="checkbox" name="jbxx" id="MEDICAL_GRP" value="MEDICAL_GRP" mean='诊疗组' />诊疗组</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="PRINCIPAL" value="PRINCIPAL" mean='主要诊断' />主要诊断</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="HOSPITAL_DEPT_CODE" value="HOSPITAL_DEPT_CODE" mean='当前/出院科室' />当前/出院科室</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="HOSPITAL_WARD_CODE" value="HOSPITAL_WARD_CODE" mean='当前/出院病区' />当前/出院病区</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="HOSPITAL_DISCHARGE_TIME" value="HOSPITAL_DISCHARGE_TIME" mean='出院日期' disabled="disabled" checked="checked"/>出院日期</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="struct_value" value="struct_value" mean='离院方式指病案' />离院方式指病案</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="MR_STATUS" value="MR_STATUS" mean='在院情况' />在院情况</label>
</div>
</div>
<div>
<div style="font-weight: bolder;">门诊基本信息: <%@include file="/util/checkbox-util-out.htm" %></div>
<div id="div-out">
<label><input class="yhjb" type="checkbox" name="jbxx" id="outgender" value="outgender" mean='性别' />性别</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="outage" value="outage" mean='年龄' />年龄</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="TREAT_DATE_TIME" value="TREAT_DATE_TIME" mean='就诊时间' />就诊时间</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="OUTDEPT_NAME" value="OUTDEPT_NAME" mean='就诊科室' />就诊科室</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="IS_FIRST" value="IS_FIRST" mean='初诊/复诊' />初诊/复诊</label>
<label><input class="yhjb" type="checkbox" name="jbxx" id="TREAT_DOCTOR_NAME" value="TREAT_DOCTOR_NAME" mean='就诊医生姓名' />就诊医生姓名</label>
<br/>
</div>
</div>
js代码
//是否全选
$('#allIn').change(function(){
if($('#allIn').get(0).checked){
$('#div-in input:checkbox:not(:disabled)').attr("checked",true);
}else{
$('#div-in input:checkbox:not(:disabled)').attr("checked",false);
}
});
$('#allOut').change(function(){
if($('#allOut').get(0).checked){
$('#div-out input:checkbox:not(:disabled)').attr("checked",true);
}else{
$('#div-out input:checkbox:not(:disabled)').attr("checked",false);
}
});
完成任务
就是这么简单，折腾了个把小时，下边针对js部分做简单的解释，尤其是
$('#div-in input:checkbox:not(:disabled)')这个地方，即选择id=div-in的checkbox并且不选中被置灰的复选框，后续又看了一些相关的内容，后续会系统的把选择器这块内容整理出来供大家一起学习。
后记：
吃一堑，长一智，人丑多读书是个不错的选择，今天谨以此功能做一个简单的分享，笔记不是写给别人看的，更多的是给自己留个成长的痕迹，至少，我曾经来过，留下了自己的脚印~
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
