使用JQuery控制复选框checkbox全选和按钮的禁用

最新推荐文章于 2024-05-18 20:34:17 发布

原创最新推荐文章于 2024-05-18 20:34:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #json #JavaScript #JSP #Cache #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JQuery控制复选框和按钮状态的示例。通过全选复选框控制子复选框的选择状态，并据此更新按钮的启用状态。示例包括JSP页面、Action和Service文件。

功能介绍：

使用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;
}