使用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();
}
}
@Override
public void add() {
index++;
Teacher teacher = new Teacher();
teacher.setId(index);
teacher.setName("教师["+index+"]");
teachers.add(teacher);
}
@Override
public void del(int id) {
for (Teacher teacher : teachers) {
if(teacher.getId() == id){
teachers.remove(teacher);
return;
}
}
}
@Override
public List<Teacher> list() {
return teachers;
}
}
Teacher对象(省略getter和setter)
public class Teacher {
int id;
String name;
}