实用的复选框操作——15分钟解决90%以上的javascript复选框操作

本文链接：https://blog.csdn.net/Allenalex/article/details/41486947

“复选框”页面：

——————————————————————————————————————————————————————————————————

实现功能：

1.点击标题行中的复选框，全部选中；否则，只选中当前行。

2.如果某条记录满足某个不能删除的条件，则该行对应的复选框不能选，删除按钮设置为灰色，点击弹出“该记录被被锁定，不能删除！”

3.否则，删除能实现，弹出“确定删除吗？”

4.如果下面的框都选上了。标题行的框也要显示被选上。

5.获取被选中的记录，如果他们已设置为不可选，则转换为可选，否则，设置为不可选。

—————————————————————————————————————————————————————————

整个页面实现的页面代码：

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<%@taglib uri="/WEB-INF/priveliege.tld" prefix="priveliege"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--@aturbo
    注意事项：struts标签（<s:if test）使用的前提条件：
     1：导入了struts基本的jar包；
     2：页面有：<%@taglib prefix="s" uri="/struts-tags"%>
     所以，直接打开该页面，不会看到<s:if test的效果。（我把它已经注释了。）。其他的效果都能看到。
 -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7" />
		<title> </title>
			<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.validate.js"></script>
		<script type="text/javascript" src="js/common-js.js"></script>
<script type="text/javascript">
	function selectAll(){
	 var selecteds = document.getElementsByName("selected");//获取name="selected"的复选框对象
	  if (selecteds != null) {
		var sall = document.getElementById("select_all");
		for ( var i = 0; i < selecteds.length; i++) {
			if (!selecteds[i].disabled) {//如果该复选框可选，
				selecteds[i].checked = sall.checked;//全选框选中，则将其也就被选中。全选框去选，则其也去选。
			}

		}
	} 
	}
	function turnDisabled(){
	   var selecteds=$("input[name='selected']:checked");//获取选择了的复选框 提醒：“$”时Jquery符号
      if(selecteds.length<1)
		{
			alert("没有选择任何记录！");
		   return;
		} 
		for(var i=0;i<selecteds.length;i++){
		  selecteds[i].disabled==true?selecteds[i].disabled=false:selecteds[i].disabled=true;
		}
	}
	function selectItem(){
	 var selecteds=document.getElementsByName("selected");
	 if(selecteds!=null){
	  var count=selecteds.length;//复选框总个数
	  var selectedCount=0;//统计被选中的个数
	  for(var i=0;i<count;i++){
	    if(selecteds[i].checked){
	      selectedCount++;
	    }
	  }
	    //如果选中的个数就是复选框总个数，那么全选/全不选框也标识为选中。
	  	document.getElementById("select_all").checked = (count == selectedCount);
	}
	}
</script>
	</head>

	<body id="cntlist">
	
			<div class="data_list">
				<table width="50%" border="1" cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th width="30" style="padding-left:6px">
								<input type="checkbox" id="select_all" name="select_all" οnclick="selectAll()" />
							</th>
							<th scope="col">Name</th>
							<th scope="col">Age</th>
							<th scope="col">Score</th>
							<th scope="col">Action</th>
						</tr>
					</thead>
					<tbody>
						<tr>
								 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value="" />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> Acc </td>
								<td align="center"> 14	</td>
								<td align="center"> 78 </td>
								<td align="center">
									<s:if
											test="false">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--		<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
							<tr>
										 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected" 
												οnclick="selectItem()"
												value=""  />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selectedIds" id="selectedIds"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> bdd </td>
								<td align="center"> 16	</td>
								<td align="center"> 96 </td>
								<td align="center">
									<s:if
											test="%{Boolean表达式：true/false}">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
							<tr>
								 <td align="center">
								   <s:if
											test="%{Boolean表达式：true/false}">
											<input type="checkbox" name="selected" id="selected"
												οnclick="selectItem()"
												value=""  />

										</s:if>
										<!--<s:else>
											<input type="checkbox" name="selectedIds" id="selectedIds"
												οnclick="selectItem()"
												value="" disabled="disabled"/>
										</s:else>-->
								</td>
								<td align="center"> ree </td>
								<td align="center"> 15	</td>
								<td align="center"> 77 </td>
								<td align="center">
									<s:if
											test="%{Boolean表达式：true/false}">
										<a href="#" οnclick='alert("确定删除吗？");'>删除</a>       
								  </s:if>
								<!--		<s:else>
										<a href="#" disabled οnclick='alert("该记录被锁定，不能删除");'>删除</a>     
										</s:else> -->
								</td>
							</tr>
					</tbody>
				</table>
			</div>
      <div><input type="button" value="转换" οnclick="turnDisabled()" /></div>
	</body>
</html>