使用JQuery控制复选框checkbox全选和按钮的禁用
功能介绍：
- 使用JQuery控制复选框：复选框分标题行的和数据行的，选中标题行复选框则全选数据行的复选框，反之则全不选；同理若数据行的复选框全被选中了，则标题行的复选框被选中，否则不选中。使用JQuery控制按钮的启用和禁用：若一个数据行被选中，则【删除一个】按钮可用，否则不可用；若没有选择了超过一个数据行，则【删除多个】按钮可用。服务端使用Struts2和Json-lib返回数据。
本示例由一个JSP文件、一个Action文件和一个Service文件构成，相信您会明白的。
JSP文件<%@taglib uri="/struts-tags" prefix="s"%><%@ 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=UTF-8"><meta http-equiv="pragma" content="no-cache"/><meta http-equiv="cache-control" content="no-cache"/><meta http-equiv="expires" content="0"/><title>基于JQuery的CheckBox多选单选操作演示</title><SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT><SCRIPT type="text/javascript">function regeditCheckboxClick(){$("tbody input").click(function(){var totalInput = $("input[name='selectOne']");var selInput = $("input[name='selectOne']:checked");//设置删除一个按钮if(selInput.size() == 1){$("#delOne").attr("disabled",false);}else{$("#delOne").attr("disabled",true);}//设置删除多个按钮if(selInput.size() > 0){$("#delMulti").attr("disabled",false);}else{$("#delMulti").attr("disabled",true);}//设置全选复选框if(selInput.size() == totalInput.size()){$("#selectAll").attr("checked",true);}else{$("#selectAll").attr("checked",false);}});}function initData(){$.post("listCheckbox2",null,function(json){$("tbody").empty();$("#delOne").attr("disabled",true);$("#delMulti").attr("disabled",true);$("#selectAll").attr("checked",false);for(var i=0;i<json.length;i++){var tr = $("<tr></tr>");tr.append('<td><input type="checkbox" name="selectOne" value="'+json[i].id+'"></td>');tr.append("<td>"+json[i].id+"</td>");tr.append("<td>"+json[i].name+"</td>");$("tbody").append(tr);}regeditCheckboxClick();},'json');}$(function(){initData();//添加一个$("#addOne").click(function(){$.post("addOneCheckbox2",null,function(data){initData();},'text');});//删除一个$("#delOne").click(function(){var selCheckbox = $("input[name='selectOne']:checked");var size = selCheckbox.size();if(size == 1){$.post("delOneCheckbox2",{"id":selCheckbox.val()},function(d){initData();},'text');}});//删除多个$("#delMulti").click(function(){var selCheckbox = $("input[name='selectOne']:checked");var size = selCheckbox.size();if(size > 0){var params = "";for(var i=0;i<size;i++){params+='&ids='+selCheckbox.eq(i).val();}$.post("delMultiCheckbox2",params.substring(1),function(d){initData();},'text');}});//全选复选框$("#selectAll").click(function(){//设置其他复选框if($(this).attr("checked")){$("input[name='selectOne']").attr("checked",true);}else{$("input[name='selectOne']").attr("checked",false);}var selInput = $("input[name='selectOne']:checked");//设置删除一个按钮if(selInput.size() == 1){$("#delOne").attr("disabled",false);}else{$("#delOne").attr("disabled",true);}//设置删除多个按钮if(selInput.size() > 0){$("#delMulti").attr("disabled",false);}else{$("#delMulti").attr("disabled",true);}});});</SCRIPT></head><body><h3>使用JQuery实现数据的删除及显示</h3><hr/><div align="center"><input type="button" id="addOne" value="添加一个"><input type="button" id="delOne" value="删除一个"><input type="button" id="delMulti" value="删除多个"><table border="1" width="260px"><thead><tr><th><input type="checkbox" id="selectAll"></th><th>编号</th><th>名称</th></tr></thead><tbody></tbody></table></div></body></html>?
Action文件package com.zywang.action;import java.io.IOException;import java.util.List;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;import com.zywang.model.Teacher;import com.zywang.services.CheckBoxService;public class CheckBoxAction extends ActionSupport {CheckBoxService checkBoxService = null;int id;int[] ids;public List<Teacher> getTeachers() {return getCheckBoxService().list();}/** * 删除一个 * @return */public String delOne() {this.getCheckBoxService().del(id);return null;}/** * 删除多个 * @return */public String delMulti() {for (int i : ids) {this.getCheckBoxService().del(i);}return null;}/** * 添加一个 * @return */public String addOne() {this.getCheckBoxService().add();return null;}/** * 列表 * @return */public String list() {List<Teacher> list = getCheckBoxService().list();String json = JSONArray.fromObject(list).toString();HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");try {response.getWriter().write(json);} catch (IOException e) {e.printStackTrace();}return null;}public CheckBoxService getCheckBoxService() {return checkBoxService;}public void setCheckBoxService(CheckBoxService checkBoxService) {this.checkBoxService = checkBoxService;}public int getId() {return id;}public void setId(int id) {this.id = id;}public int[] getIds() {return ids;}public void setIds(int[] ids) {this.ids = ids;}}?
Service文件package com.zywang.services.impl;import java.util.List;import java.util.Vector;import com.zywang.model.Teacher;import com.zywang.services.CheckBoxService;public class CheckBoxServiceImpl implements CheckBoxService {private static List<Teacher> teachers = new Vector<Teacher>();private static int index=0;static{CheckBoxServiceImpl impl = new CheckBoxServiceImpl();for(int i=0;i<10;i++){impl.add();}}@Overridepublic void add() {index++;Teacher teacher = new Teacher();teacher.setId(index);teacher.setName("教师["+index+"]");teachers.add(teacher);}@Overridepublic void del(int id) {for (Teacher teacher : teachers) {if(teacher.getId() == id){teachers.remove(teacher);return;}}}@Overridepublic List<Teacher> list() {return teachers;}}?
Teacher对象(省略getter和setter)public class Teacher {int id;String name;}?