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

来源：互联网发布：java web三大框架书籍编辑：程序博客网时间：2024/05/18 16:16

“复选框”页面：

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

实现功能：

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

0 0