在JSP里,checkbox有几种表达方式,常见的两种主要有:
<input type="checkbox" name="Car" >
<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>
其中<form:checkbox.../>标签来自于(org.springframework.web.servlet.tags.form.CheckboxTag)这个Spring标签库。
当Checkbox是选中状态的时候标签为<input type="checkbox" name="car" checked/>,
非选中的时候标签<input type="checkbox" name="car"/>
JS利用取得值得长度为空则为非选中,反之为选中。
但是如果使用Spring的标签库的话,例如<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>,当checkbox为选中状态时候,value的值为true,非选中的时候为false。传到服务器端的这个结果可以直接用来判断,更方便。
另外还有许多个checkbox列表全选中checkbox的问题,首先,此列表中的每一个 checkbox当先选中“全选中”的时候,对应所有checkbox都选中,当先非选中“全选中”的时候,对应对应所有checkbox都不选中,反之亦然。即列表中的checkbox和全选中的checbox是要求对应的。当然,列表中checkbox的ID和Name属性要保持一致。
在没有用任何框架的情况下,最基础的方法是用javascript来实现,参照如下:<script language="javascript">
//选中全选按钮,下面的checkbox全部选中
var selAll = document.getElementById("selAll");
function selectAll()
{
var obj = document.getElementsByName("checkAll");
if(document.getElementById("selAll").checked == false)
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=false;
}
}else
{
for(var i=0; i<obj.length; i++)
{
obj[i].checked=true;
}
}
}
//当选中所有的时候,全选按钮会勾上
function setSelectAll()
{
var obj=document.getElementsByName("checkAll");
var count = obj.length;
var selectCount = 0;
for(var i = 0; i < count; i++)
{
if(obj[i].checked == true)
{
selectCount++;
}
}
if(count == selectCount)
{
document.all.selAll.checked = true;
}
else
{
document.all.selAll.checked = false;
}
}
//反选按钮
function inverse() {
var checkboxs=document.getElementsByName("checkAll");
for (var i=0;i<checkboxs.length;i++) {
var e=checkboxs[i];
e.checked=!e.checked;
setSelectAll();
}
}
</script>
<html>
<body>
<center>
<input type="checkbox" id="selAll" onclick="selectAll();" />全选
<input type="checkbox" id="inverse" onclick="inverse();" />反选
<div id="allcheck">
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br>
<input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br>
</div>
</center>
</body>
</html>
还有一种方法是用jQuery,代码量少一点。jQuery里面封装了大量的函数(也就是事件方法),就像Java的工具类一样,可以直接调用。例如,下面用到的jQueryObject.prop( propertyName [, value ] )
函数功能是设置或返回指定属性propertyName
的值。如果指定了value
参数,则表示设置属性propertyName
的值为value
;如果没有指定value
参数,则表示返回属性propertyName
的值。如果需要删除DOM元素的属性,请使用removeProp()函数。总之prop函数跟设置属性相关。可以利用工具手册找到自己需要的函数。
// 全选框
$(function() {
$("#allCheckFlg").click(function() {
$(‘input[id="checkItem"]‘).prop("checked", this.checked);
});
var $checkItem = $("input[id=‘checkItem‘]");
$checkItem
.click(function() {
$("#allCheckFlg")
.prop(
"checked",
// 如果id为checkItem的checbox的长度和id为checkItem的且选中状态下的checbox长度一样,则返回true,反之返回false
$checkItem.length == $("input[id=‘checkItem‘]:checked").length ? true : false);
});
});
.....................略........................
<div style="height:330px; width:1281px;" id="Detail">
<table border="1" style="width:1280px;margin-left:20px;">
<thead>
<th style="background-color:#99C; width:60px; text-align:center;">
<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>全选中</th>
<th style="background-color:#99C; width:60px; text-align:center;">序号</th>
<th style="background-color:#99C; width:90px; text-align:center;">部门编码</th>
<th style="background-color:#99C; width:120px; text-align:center;">部门名称</th>
<th style="background-color:#99C; width:200px; text-align:center;">备注</th>
<th style="background-color:#99C; width:60px; text-align:center;">停用Flg</th>
</thead>
<tbody>
<c:forEach var="departmentInfo" items="${depsForm.departmentList}" varStatus="st">
<tr>
<td style="text-align: center;">
<form:checkbox path="departmentList[${st.index}].checkItem" id="checkItem" value="${departmentInfo.checkItem}"></form:checkbox>
</td>
<td style="text-align: center;"><c:out value="${st.index+1 }"></c:out></td>
<td style="text-align: center;"><c:out value="${departmentInfo.code }"></c:out></td>
<td style="text-align: center;"><c:out value="${departmentInfo.name }"></c:out></td>
<td style="text-align: center;"><c:out value="${departmentInfo.remark }"></c:out></td>
<c:if test="${departmentInfo.disabledflg==1}">
<td style="text-align: center;">
<input type="checkbox" name="disabledflg" checked="checked" disabled="disabled" /></td>
</c:if>
<c:if test="${departmentInfo.disabledflg==0}">
<td style="text-align: center;">
<input type="checkbox" name="disabledflg" disabled="disabled" /></td>
</c:if>
</tr>
</c:forEach>
</tbody>
</table>
</div>