功能介绍：
- 使用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;
}
分享到：
相关推荐
jQuery实现复选框checkbox的全选与反选功能，不用多介绍了吧，以往都是基于纯js的实现比较多，这个是引入了jquery，或许更能满足现在的前端设计吧。
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
QTableWidget表头添加复选框实现全选功能。有点投机取巧，但是功能是实现了。实现很简单。
实现table表格checkbox复选框的全选 反选.
复选框实现datagridview全选反选和全不选,datagridview换颜色（选中复选框之后）
winform DataGridView表头带CheckBox全选；winform DataGridView表头带CheckBox全选
jQuery多级复选框checkbox选中代码，支持水平横向与垂直纵向排列，共有3种排列样式，具体看演示。
js 实现 复选框全选（二）! 值得下载看看!资源免费,大家分享!!
DataGridView 复选框列实现全选。点击列头的复选框下面的行全部选中或者全部取消。
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
用JQUERY实现全选和取消全选,减少了我们写JS的麻烦,我们再也不用写那么多代码了,给大家分享两段代码,用JQUERY实现复选框的全选和取消全选.
对于jQuery自定义复选框checkbox和单选框Radiobox，我们已经有介绍过不少了，比如9款迷人样式的CSS3自定义Checkbox复选框和HTML5/CSS3开关按钮 立体3D按钮。今天要介绍的是一款基于jQuery的美化版复选框，它的特点是...
js checkbox全选 反选 取消全部设置表单html复选框
spreadjs_列头添加复选框全选功能-demo
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下: $(function(){ $(“#checkedAll”).click(function(){ $(‘[name=items]:checkbox’)...
介绍了jQuery checkbox复选框全选功能的代码实例，有需要的朋友可以参考一下
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
JQuery实现checkbox的全选取消全选
CheckBox复选框JS实现全选、不选、全不选功能，很简单，具体内容如下 思路： 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...