功能介绍：
- 使用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提供的便利功能，我们可以轻松地实现复选框全选和取消全选的交互效果，同时根据用户的选择状态控制其他元素的行为，如启用或禁用按钮。这样的设计不仅提高了用户体验，也增强了网页的交互性和...
此外，还可以使用`disabled`属性来禁用全选复选框，以防止在特定条件下触发全选功能。例如，当没有子复选框可用时，可以这样做： ```javascript if (checkboxes.length === 0) { document.getElementById('select...
全选按钮可能有一个ID，如 "selectAll"，而复选框可能有一个共享的类名，如 "checkboxItem"。 在jQuery中，我们可以绑定一个点击事件到全选按钮上，当点击时，遍历所有的复选框并改变它们的状态。代码可能如下： `...
2. 使用jQuery遍历数组，禁用对应的复选框，并添加禁用样式。 3. 监听复选框的状态变化，处理选中数据时排除禁用的行。 4. 自定义CSS样式以调整禁用复选框的视觉效果。 通过这种方式，可以灵活控制表格中哪些行的复...
首先，获取复选框被选中数量可以通过使用jQuery的属性选择器和内置属性进行。如示例代码中使用了`$("input[name='test']:checked").length`来统计名称为`test`的复选框中被选中的数量。这是一个非常高效的方法，其中...
在Layui的表格中实现checkbox全选功能，通常需要在表格头部添加一个全选复选框，其name值为空，并且其lay-filter属性设置为特定的标识符，例如上述代码中的"allChoose"。这样当全选复选框的状态发生改变时，通过监听...
jQuery提供了强大的DOM操作和事件处理能力，使得实现复选框的全选、反选和批量删除等功能变得非常简单。通过合理组织和封装代码，可以提高代码的可维护性和复用性，使你的网页应用更加高效和灵活。
本文将深入探讨`prop()`函数在控制复选框全选、反选中的应用。 ### prop()函数的基本使用 `prop()`函数的基本语法是： ```javascript $(selector).prop(propertyName, value); ``` 其中，`selector`是你想要操作...
树形复选框（dtree）是一种用户界面组件，常用于数据组织和筛选，尤其在网页和应用程序设计中。它结合了树结构和复选框的功能，允许用户以层次化的方式选择一组相关的选项。在dtree中，每个节点都可以是一个复选框，...
1. 使用jQuery的`.next().attr("class","layui-unselectlayui-form-checkbox")`给超出限制的复选框的下一个元素（通常是标签）设置一个新的CSS类，用于改变该元素的样式，通常是为了提示用户该选项已被禁用。...
这里，`$`符号是jQuery的选择器，`$("input[name='fruit']")`选取所有name属性为'fruit'的复选框，然后使用`.prop()`方法将它们的`checked`属性设置为`"checked"`，从而实现全选。 反选功能的实现类似，但需要取消...
在jQuery中处理复选框（checkbox）的选择状态时，可能会遇到一些常见的问题。这篇笔记将详细探讨这些问题，并提供相应的解决方案。 首先，复选框在HTML中的基本结构是`<input type="checkbox">`，用于创建用户可以...
1. **全选功能**：在网页表单或列表中，全选功能通常通过一个复选框来实现。当用户点击这个复选框时，所有相关的列表项应该被自动选中。这可以通过JavaScript来实现，监听复选框的`change`事件，然后遍历所有子项并...
在IT界，尤其是在前端开发中，"带checkbox的下拉框"是一种常见的用户界面元素，它结合了传统的HTML `select` 元素和复选框（checkbox）的功能，提供了更丰富的交互体验。这种设计通常用于让用户能够从多个选项中进行...
实现全选功能，我们需要在页面上创建一个“全选”复选框。当用户点击这个复选框时，触发一个JavaScript事件（例如onChange）。在这个事件处理函数中，我们需要遍历购物车中的每个商品项，并改变它们的选中状态。在...
了解了如何禁用EasyUI树形控件的复选框后，我们还可以进一步探讨相关的扩展功能，如级联选择、全选/全不选、异步加载数据等。在实际项目中，根据业务需求，我们可能需要结合后台数据动态控制节点的禁用状态，这需要...
这通常通过遍历所有复选框，检查其`checked`状态来实现，然后收集对应的值或数据。 6. **事件处理**：jQuery的事件处理功能在这里扮演了重要角色。例如，当用户点击按钮时，会触发相应的事件处理函数，执行相应的...
根据元素类型，它会分别处理文本框、密码框、文本区域、复选框、单选按钮和下拉列表，确保所有可编辑的值都被重置。 8. **防止表单重复提交** 当表单提交时，它会被标记为已提交(`submited: true`)，并存储在...