这篇博客介绍了如何使用jQuery和HTML创建一个基础的表单，其中包括在表格中添加复选框并实现全选、反选功能。同时，它详细讲解了如何设置部分复选框为禁用状态（灰色不可选），以及全选按钮如何智能地处理这些禁用项。此外，内容还涵盖了单选操作的实现。
使用jquery和html做一个基础性的表单效果，记录一下：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>预约信息管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript">
function detail(id){
if($("#"+id).attr('hidden')=='hidden'){
$("#"+id).fadeIn(1000);
$("#"+id).removeAttrs("hidden");
}else{
$("#"+id).fadeOut(1000);
$("#"+id).attr("hidden","hidden");
}
}
$(function() {
// :checkbox表示 获取到表格body的所有checkbox
var $tbCheckboxes = $("#j_tb").find(":checkbox:not(:disabled)");
// 全选和全不选
$("#j_cbAll").click(function () {
// 使用prop这个方法来 判断 这个checkbox有没有被选中
var isChecked = $(this).prop("checked");
//alert(isChecked);
if (isChecked) {
// 让表格body里面的所有checkbox选中
// :checkbox 这个选择器会帮我们选择到所有的checkbox
$tbCheckboxes.prop("checked", true);
} else {
// 让表格body里面的所有checkbox不选中
$tbCheckboxes.prop("checked", false);
}
});
// 单选控制全选checkbox选中或者不选中
$tbCheckboxes.click(function () {
// 获取到所有被选中的checkbox的个数跟所有的checkbox个数 对比
// :checked表示：获取到body中所有被选中的checkbox
// length属性表示 获取到元素的长度
var checkedLength = $("#j_tb").find(":checked").length;
// 获取到所有的checkbox的长度
var allCheckboxLength = $tbCheckboxes.length;
//alert(checkedLength);
// 如果相等，就让全选按钮选中
if (checkedLength == allCheckboxLength) {
$("#j_cbAll").prop("checked", true);
} else {
// 否则，让全选按钮不选中
$("#j_cbAll").prop("checked", false);
}
});
$('[type="checkbox"]').click(function () {
if(this.checked){
$('[name="cancel"]').fadeIn(1000);
$('[name="cancel"]').removeAttrs("hidden");
}
if($('[type="checkbox"]:checked').size()==0){
$('[name="cancel"]').fadeOut(1000);
$('[name="cancel"]').attr("hidden","hidden");
}
});
});
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/bespeakweb/bespeakBookingweb/list">预约信息列表</a></li>
<%--<shiro:hasPermission name="bespeakweb:bespeakBooking:edit"><li><a href="${ctx}/bespeakweb/bespeakBooking/form">预约信息添加</a></li></shiro:hasPermission>--%>
</ul>
<form:form id="searchForm" modelAttribute="booking" action="${ctx}/bespeakweb/bespeakBookingweb/list" method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>预约日期：</label>
${booking.bookingDate}
<input name="bookingDate" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${booking.bookingDate}"
onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</li>
<li><label style="width: 92px;">预约开始时间：</label>
<input name="bookingStartTime" type="text" readonly="readonly" id="startDate" maxlength="20" class="input-medium Wdate"
value="${booking.bookingStartTime}"
onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</li>
<li><label style="width: 92px;">预约结束时间：</label>
<input name="bookingEndTime" type="text" readonly="readonly" id="endDate" maxlength="20" class="input-medium Wdate"
value="${booking.bookingEndTime}"
onclick="WdatePicker({dateFmt:'HH:mm',isShowClear:false,minDate:'#F{$dp.$D(\'startDate\')}'});"/>
</li>
<li class="clearfix"></li>
</ul><br>
<ul class="ul-form" >
<li><label>市民姓名：</label>
<form:input path="czName" htmlEscape="false" maxlength="30" class="input-medium"/>
</li>
<li style="padding-left: 12px"><label>身份证号：</label>
<form:input path="idCard" htmlEscape="false" maxlength="30" class="input-medium"/>
</li><li><label >预约状态：</label>
<li style="padding-left: 18px">
<select name="bookingState" id="selectState" style="width: 92px;">
<option value="">全 部</option>
<option value="0" <c:if test="${booking.bookingState=='0'}">selected</c:if>>未处理</option>
<option value="1" <c:if test="${booking.bookingState=='1'}">selected</c:if>>已处理</option>
<option value="2" <c:if test="${booking.bookingState=='2'}">selected</c:if>>已取消</option>
</select>
</li>
</li>
<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
<li class="clearfix"></li>
</ul>
</form:form>
<sys:message content="${message}"/>
<form action="${ctx}/bespeakweb/bespeakBookingweb/save" class="breadcrumb form-search">
<ul class="ul-form" name="cancel" hidden="true">
<li><input type="text" class="input-medium" placeholder="请填写取消事由" /><span class="help-inline"><font color="red">*</font> </span></li>
<li class="btns"><input type="submit" class="btn btn-primary" value="全部取消" /></li>
<li class="clearfix"></li>
</ul>
<br>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll" />全选</th>
<th>预约日期</th>
<th>预约时间</th>
<th>预约事由</th>
<th>预约状态</th>
<th>市民电话</th>
<th>取消事由</th>
<th>详细信息</th>
<shiro:hasPermission name="bespeakweb:bespeakBooking:edit"><th>操作</th></shiro:hasPermission>
</tr>
</thead>
<tbody id="j_tb">
<c:forEach items="${page.list}" var="bespeakBooking" varStatus="s">
<tr>
<td>
<c:choose>
<c:when test="${bespeakBooking.bookingState=='0'}">
<input type="checkbox" name="id" value="${bespeakBooking.id}">
</c:when>
<c:otherwise>
<input type="checkbox" name="id" disabled=true value="${bespeakBooking.id}">
</c:otherwise>
</c:choose>
</td>
<td>
${bespeakBooking.bookingDate}
</td>
<td>
${bespeakBooking.bookingTime}
</td>
<td>
${bespeakBooking.bookingInfo}
</td>
<td>
<c:choose>
<c:when test="${bespeakBooking.bookingState==0}">未处理</c:when>
<c:when test="${bespeakBooking.bookingState==1}">已处理</c:when>
<c:otherwise>已取消</c:otherwise>
</c:choose>
</td>
<td>
${bespeakBooking.bookingTel}
</td>
<td>
${bespeakBooking.cancelInfo}
</td>
<td>
<%--<a href="${ctx}/bespeakweb/bespeakBookingweb/detail?id=${bespeakBooking.id}">详情</a>--%>
<a href="javascript:void(0);" onclick="detail('${bespeakBooking.id}')" >详情</a>
</td>
<shiro:hasPermission name="bespeakweb:bespeakBooking:edit"><td>
<%--<a href="${ctx}/bespeakweb/bespeakBooking/form?id=${bespeakBooking.id}">修改</a>--%>
<c:choose>
<c:when test="${bespeakBooking.bookingState=='0'}">
<a href="${ctx}/bespeakweb/bespeakBookingweb/cancel?id=${bespeakBooking.id}" id="testHref" onclick="return confirmx('确认要取消该预约信息吗？', this.href)">取消</a>
</c:when>
<c:otherwise>
取消
</c:otherwise>
</c:choose>
</td></shiro:hasPermission>
</tr>
<tr hidden="true" id="${bespeakBooking.id}">
<td colspan="9" style="text-align: center;">
<c:choose>
<c:when test="${bespeakBooking.count==1}">
<iframe src="${ctx}/bespeakweb/bespeakBookingweb/detail?id=${bespeakBooking.id}" scrolling="no" frameborder="0" style="width: 100%;height: ${bespeakBooking.count*40}%" ></iframe>
</c:when>
<c:otherwise>
<iframe src="${ctx}/bespeakweb/bespeakBookingweb/detail?id=${bespeakBooking.id}" scrolling="no" frameborder="0" style="width: 100%;height: ${bespeakBooking.count*20+20}%" ></iframe>
</c:otherwise>
</c:choose>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
<div class="pagination">${page}</div>
</body>
</html>
这一页包含了几个基础性的页面效果：
1、表格中添加复选框，并对其进行全选与反选，以及单独选。
（1）设置某些行数因为特殊操作不能被选，置灰
（2）点击全选，置灰的不能被选，并且将隐藏的form展示：
（3）再次点击全选，即全部取消被选，并且表单隐藏恢复到（1）
（4）单选操作，单独选中和普通复选框选择无差别
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
