jQuery复选框全选全不选代码

最新推荐文章于 2025-08-15 09:50:45 发布
最新推荐文章于 2025-08-15 09:50:45 发布
阅读量51 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lily2015/p/4661965.html
本文介绍了一种使用jQuery实现表格中复选框全选与反选功能的方法。通过自定义jQuery函数`checkCbx`，使得点击按钮即可切换所有复选框的状态，并更新按钮文本以反映当前的选择状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>jQuery复选框全选全不选代码</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$.fn.checkCbx=function(){
return this.each(function(){
this.checked = !this.checked;
})
}
$(function(){
$("#btnSelect").click(function(){
this.value = this.value == "全选"?"反选":"全选";
$("input:checkbox").checkCbx();
})
})
</script>
</head>
<body>
<form name="form1" method="post" action="Default8.aspx" id="form1">
<table border="1">
<tr>
<th>选择</th>
<th>id</th>
<th>姓名</th>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>1</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>2</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>3</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>4</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>5</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>6</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>7</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>8</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>9</td>
<td>蚂蚁部落</td>
</tr>
<tr>
<td><input type="checkbox" name="cbx" /></td>
<td>10</td>
<td>蚂蚁部落</td>
</tr>
</table>
<input id="btnSelect" type="button" value="全选" />
</form>
</body>
</html>

转载于:https://www.cnblogs.com/lily2015/p/4661965.html

jQuery实现复选框全选和取消全选功能
牧小七的博客
04-25 1292
使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选。
基于 jQuery 实现复选框全选与选中项查询功能
Auscy的博客
06-20 616
通过以上方案，可实现功能完整、性能优化的复选框全选与选中项查询功能，满足大多数前端项目需求。通过以上实现，你可以构建一个功能完善、交互友好的复选框全选与查询系统，满足大多数项目需求。
jquery实现复选框全选或全不选
JaneWay_Chen的博客
05-22 1297
前言：prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 通过jQuery的$("#id").prop(“checked”, true);实现全选功能。 话不多说，直接上代码 HTML代码 <div class="form-check"> <input class="form-check-input" type="checkbox" onclick="checkedA
JQuery 实现复选框全选与全不选
伦哥哥
04-22 871
–复选框这个主要考察JQuery的选择器。 一、分析过程 1·当点击全选/全不选按钮激发函数调用 2·只需要把其余的复选框的checked属性值与全选/全不选的checked值保持一致即可。 二、具体实现 1·html内容如下； &lt;table border="1" cellspacing="" cellpadding=""&gt; &lt;t...
jQuery实现复选框全选，全不选，反选功能
weixin_48747169的博客
03-23 2488
index.jsp <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script&g
jQuery实现复选框的全选和全不选
热门推荐
刘鹏博的博客
02-03 2万+
jQuery实现复选框的全选和全不选 效果如图： 代码如下： jQuery实现复选框的全选和全不选 全选 复选框1 复选框2 复选框3 复选框4 复选框5 $('input[name="checkall"]').on("click",function(){ if($(this).is(
jQuery复选框全选&取消全选
honvin的博客
09-29 3752
效果图 <script> $(function () { $('#checkAll').click(function () { //全选按钮状态 var checkStatus = this.checked; $("input[name='userCheckbox']").attr(...
快速掌握jQuery复选框全选与全不选功能实现
weixin_28895791的博客
08-03 982
jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，极大地提升了开发者在前端开发中的效率和体验。自从2006年发布以来，jQuery迅速成为最流行的JavaScript库之一，广泛应用于各种web项目中。在Web开发中，事件监听是处理用户交互的核心部分。jQuery提供了一套简单而强大的方法来处理这些事件。.click()是这些方法中的一个，它使得绑定点击事件变得非常容易。当一个元素被点击时，.click()
jQuery 复选框全选反选全不选
htflll的博客
08-02 150
<body> <div class="one"> <div class="two"> 姓名：<input type="text"> 学号：<input type="text"> 电话：<input type="text"> <button>新增</but
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
js与jQuery实现checkbox复选框全选/全不选的方法
11-24
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
jquery复选框全选/取消示例
01-19
### jQuery复选框全选/取消示例 #### 功能概述 本文档旨在介绍如何使用jQuery来实现复选框的全选与取消全选功能。具体功能包括： 1. **全选子复选框**：当点击主复选框时，能够自动全选或取消所有下属复选框。 2. ...
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 512
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
electron进程间通信- 从渲染进程到主进程
唐璜Taro的博客
08-13 1016
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad
m0_74743788的博客
08-13 1247
普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 1195
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
20道Vue框架相关前端面试题及答案
qq_39540458的博客
08-14 892
Vue是一个渐进式JavaScript框架，具有响应式数据绑定、组件化开发等核心特性。面试常见问题包括：双向数据绑定原理（Vue2使用Object.defineProperty，Vue3改用Proxy）、生命周期钩子（如created、mounted）、组件通信方式（props/emit、provide/inject等）、计算属性与监听器的区别、v-if与v-show的适用场景等。Vuex用于状态管理，包含state、mutations等核心概念；Vue Router支持hash和history两种路由模式
VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
最新发布
mashirokayo的博客
08-15 945
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
JQuery实现复选框全选与全不选功能
标题中提到的是关于JQuery技术在处理复选框全选和全不选功能的一种应用场景。复选框全选和全不选是Web前端开发中常见的功能之一，它允许用户通过一个操作来统一选择或取消选择一组选项。这个功能在用户界面中非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值