`

jQuery实现CheckBox的全选与反选

阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选与反选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>    
<script type="text/javascript">
	$(function() {
		$("#checkboxAll").click(function() {
			$('input[name="boxList"]').attr("checked",this.checked); 
		});
		var $boxList = $("input[name='boxList']");
		$boxList.click(function(){
			$("#checkboxAll").attr("checked",$boxList.length == $("input[name='boxList']:checked").length ? true : false);
		});
	});
</script>
</head>
<body>
	<div>
		<input type="checkbox" id="checkboxAll" />全选
		<input type="checkbox" name="boxList" />测试1
		<input type="checkbox" name="boxList" />测试2
		<input type="checkbox" name="boxList" />测试3
		<input type="checkbox" name="boxList" />测试4
	</div>
</body>
</html>
分享到:
评论

相关推荐

    jquery 一个checkbox控制全选与反选

    页面上通过一个checkbox实现全选与反选

    checkbox实现全选和反选经典例子

    这可以通过监听全选Checkbox的`CheckedChanged`事件来实现,然后遍历DataGridView的所有行,设置每一行的Checkbox为与全选Checkbox状态一致。 - **反选功能**:反选意味着取消所有已选中的项。这可以通过再次触发...

    jquery实现checkbox全选、反选、全部选。精简写法

    jquery实现checkbox全选、反选、全部选,很不错的资源,欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    Js/Jquery 实现checkbox全选,反选,全不选

    在提供的文件“js实现checkbox全选,反选,全不选.htm”中,应当包含了上述功能的具体实现。通过查看源码,我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例,帮助我们更好地...

    Jquery实现全选和反选功能

    本教程将深入探讨如何使用jQuery实现全选和反选功能,这在多选列表或表格中非常常见,例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框(通常标记为“全选”)...

    JQuery插件之全选与反选

    本主题将深入探讨jQuery中的"全选"与"反选"功能,这是一个常见且实用的功能,尤其是在处理多选框(Checkbox)的场景中。 全选与反选功能在用户界面设计中十分常见,例如在批量选择数据项、同意服务条款或选择订阅...

    jQuery实现复选框checkbox全选、反选功能.rar

    本示例中,我们关注的是如何使用jQuery来实现复选框(checkbox)的全选和反选功能,这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中,复选框通常由`&lt;input&gt;`标签定义,类型为...

    checkbox 全选与反选

    综上所述,实现“checkbox全选与反选”涉及到了HTML、CSS和JavaScript的综合运用,尤其在事件处理和状态管理方面。通过合理的编程逻辑和前端框架,我们可以构建出高效且用户体验良好的全选与反选功能。在实际项目中...

    Jquery 1.42 checkbox 全选和反选代码

    在这个例子中,我们将详细解析如何使用jQuery 1.4.2版本实现复选框的全选和反选功能。 首先,我们需要引入jQuery库。在HTML代码中,可以看到引入了`jquery-1.4.2.min.js`文件,这是jQuery的核心库: ```html ...

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在涉及到表单元素如复选框(Checkbox)时,经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能,以及如何进行表单验证。 1. **全选功能** 要实现全选功能,首先我们需要一个主复选框...

    jquery 全选,反选

    使用jquery实现 checkbox的 全选,反选

    js, jQuery实现全选、反选功能.docx

    总结来说,JavaScript和jQuery实现全选、反选功能的核心在于监听全选按钮和子复选框的点击事件,并根据当前选中状态来更新其他复选框的状态。JavaScript通过原生DOM操作,而jQuery则利用简洁的链式操作和事件处理,...

    jquery checkbox全选反选效果代码

    知识点一:使用jQuery实现checkbox全选和反选功能 1. jQuery是一种快速、小巧、功能丰富的JavaScript库,它封装了JavaScript常用的功能代码,极大地简化了JavaScript的开发。 2. checkbox全选和反选是web开发中常见...

    jQuery全选、反选与获取选中值

    本文将深入探讨jQuery中关于“全选”、“反选”以及“获取选中值”的相关知识点,帮助你更好地理解和应用这些功能。 ### 一、jQuery全选 全选功能通常应用于多选列表或表格中,允许用户一次性选择所有选项。在...

    复选框的全选和反选、复选框的全选和反选

    同时,还需要考虑如何处理用户直接操作单个复选框的情况,确保全选和反选按钮的状态与当前选中项保持一致。 除了前端,全选和反选的概念也广泛应用于后端数据库操作。例如,用户可能需要批量删除或更新一组记录。在...

    一个基于jQuery 实现的的全选、反选复选框插件源码例子

    如果这是一个源码文件,那么它应该包含了上述提到的jQuery实现的复选框全选反选功能的完整代码。 总结起来,这个基于jQuery的全选、反选复选框插件源码例子涉及到了jQuery的选择器、属性操作、事件处理、可能还有...

    实现table表格checkbox复选框的全选 反选

    接下来,我们使用JavaScript(通常配合jQuery库,但也可以使用原生JS)来实现全选/反选功能。这里我们使用jQuery: ```javascript $(document).ready(function() { $('#selectAll').click(function() { if ($...

    3分钟写出来的Jquery版checkbox全选反选功能

    知识点一:Jquery基础 ...通过这篇文章,我们可以了解到Jquery的基本使用方法,以及如何使用Jquery来实现checkbox的全选和反选功能。虽然文章作者提到这个示例可能存在一些bug,但这并不影响我们从中学到的知识。

Global site tag (gtag.js) - Google Analytics