简单的jquery全选反选案例

作者：冯家岗台区_941 | 来源：互联网 | 2023-08-27 10:15

本demo适合刚学习jQuery的战友学习。一个星期平均有4次晚上是吃某荔村肠粉，所以内容就是我晚上经常点吃的那些。一般我都是吃14块钱。效果如图：HTML代码：1<ulid

本demo适合刚学习jQuery的战友学习。

一个星期平均有4次晚上是吃某荔村肠粉，所以内容就是我晚上经常点吃的那些。一般我都是吃14块钱。

效果如图：

HTML代码：

 1 <ul id='food'>
 2     <li><input type="checkbox" value='8'>8元 红豆沙li>
 3     <li><input type="checkbox" value='5'>5元 青菜肠li>
 4     <li><input type="checkbox" value='2'>2元 加底li>
 5     <li><input type="checkbox" value='7'>7元 鸡蛋青菜粥li>
 6     <li><input type="checkbox" value='6'>6元 白灼鲜蔬菜li>
 7     <li><input type="checkbox" value='7'>7元 黄金南瓜粥li>
 8     <li><input type="checkbox" value='3'>3元 卤蛋li>
 9 ul>
10 <div>
11     <input type="checkbox" id='all'>
12     <input type="button" value='全选' id='selectAll'>
13     <input type="button" value='全不选' id='unselectAll'>
14     <input type="button" value='反选' id='reverse'>
15     <input type="button" value='获得选中的值' id='getnum'>
16 div>

JS代码：

 1 
 2

推荐阅读

input
全面解析 jQuery 中的 $.extend()、$.fn 与 $.fn.extend() 方法及其应用

本文深入解析了 jQuery 中用于扩展功能的三个关键方法：`$.extend()`、`$.fn` 和 `$.fn.extend()`。其中，`$.extend()` 用于扩展 jQuery 对象本身，而 `$.fn.extend()` 则用于扩展 jQuery 的原型对象，使自定义方法能够作为 jQuery 实例的方法使用。通过这些方法，开发者可以轻松地创建和集成自定义插件，增强 jQuery 的功能。文章详细介绍了每个方法的用法、参数及实际应用场景，帮助读者更好地理解和运用这些强大的工具。 ... [详细]

蜡笔小新 2024-11-09 10:08:04
post
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
input
jQuery 入门指南与实战应用

本文详细介绍了 jQuery 的入门知识与实战应用，首先讲解了如何引入 jQuery 库及入口函数的使用方法，为初学者提供了清晰的操作指南。此外，还深入探讨了 jQuery 在实际项目中的多种应用场景，包括 DOM 操作、事件处理和 AJAX 请求等，帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]

蜡笔小新 2024-11-04 17:28:16
post
在范围[0..n-1]中产生m个不同的随机数 - Generating m distinct random numbers in the range [0..n-1]

Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]

蜡笔小新 2024-11-13 09:49:14
input
使用jqTransform插件美化表单

jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件，专用于美化表单元素，操作简便，能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]

蜡笔小新 2024-11-12 22:29:28
input
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
substring
如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解

如何使用 `org.eclipse.rdf4j.query.impl.MapBindingSet.getValue()` 方法及其代码示例详解 ... [详细]

蜡笔小新 2024-11-11 02:42:52
post
关于使用JavaScript在多个页面间传递参数的技术探讨

本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]

蜡笔小新 2024-11-09 09:28:55
post
深入解析 jQuery 中 ajaxSubmit 方法的使用技巧与应用场景

本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先，介绍了如何正确引入必要的脚本文件，如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着，通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交，包括数据的发送、接收和处理。此外，还讨论了该方法在不同场景下的应用，如文件上传、表单验证和动态更新页面内容等，提供了丰富的代码示例和最佳实践建议。 ... [详细]

蜡笔小新 2024-11-07 19:38:19
input
【整理】JavaScript中DOM操作全面解析与实践指南

本文全面解析了JavaScript中的DOM操作，并提供了详细的实践指南。DOM节点（Node）通常代表一个标签、文本或HTML属性，每个节点都具有一个nodeType属性，用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作，结合实际案例，帮助读者更好地理解和掌握DOM编程技术。 ... [详细]

蜡笔小新 2024-11-07 19:20:50
callback
Mr.J 的 jQuery 学习笔记：第三十一讲——深入解析事件操作（on/off）方法

`on()` 方法用于在选定元素及其子元素上绑定一个或多个事件处理程序。从 jQuery 1.7 版本开始，`on()` 方法取代了 `bind()`、`delegate()` 和 `live()` 方法，成为统一的事件绑定方式。该方法不仅支持直接绑定事件，还支持事件委托，使得事件处理更加灵活和高效。通过 `off()` 方法，可以移除之前使用 `on()` 绑定的事件处理程序，从而实现对事件的动态管理。 ... [详细]

蜡笔小新 2024-11-06 22:12:28
callback
探究HTML5应用中的三种Accordion交互效果

在HTML5应用中，Accordion（手风琴，又称抽屉）效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果，通过层次结构优化信息展示和页面布局，提升用户体验。这些效果不仅增强了视觉效果，还提高了内容的可访问性和互动性。 ... [详细]

蜡笔小新 2024-11-04 18:09:29
post
JavaWeb文件上传：前端实现与后端处理详解

在JavaWeb开发中，文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件，都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件，该库提供了强大的文件解析和存储能力，能够高效地处理各种文件类型。此外，为了提高系统的安全性和稳定性，还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]

蜡笔小新 2024-11-11 19:50:46
include
洛谷 P1344 坏牛奶追踪问题（最小割算法应用）

在洛谷 P1344 的坏牛奶追踪问题中，第一问要求计算最小割，而第二问则需要找到割边数量最少的最小割。通过为每条边附加一个单位权值，可以在求解最小割时优先选择边数较少的方案，从而同时解决两个问题。这种策略不仅简化了问题的求解过程，还确保了结果的最优性。 ... [详细]

蜡笔小新 2024-11-07 14:50:22
post
深入解析Ajax的工作机制及其在现代Web开发中的应用

本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术，改变了传统的客户端与服务器直接交互的模式。通过引入Ajax，客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理，包括XMLHttpRequest对象的使用、数据传输格式（如JSON和XML）以及事件处理机制。此外，还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用，并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]

蜡笔小新 2024-11-07 14:11:10

冯家岗台区_941

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章