jq实现全选和全不选

最新推荐文章于 2021-08-16 14:46:12 发布
最新推荐文章于 2021-08-16 14:46:12 发布
阅读量522 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxm809/article/details/108421886
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成复选框的全选和全不选</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
		<script>
			$(function(){
				$("#select").click(function(){
					//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
					//attr方法与JQ的版本有关，在1.8.3及以下有效。
					//$("tbody input").attr("checked",this.checked);
					$("tbody input").prop("checked",this.checked);
				});
			});
		</script>
		
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" >
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" id="select"></th>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

 

dxm809
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现全选反选全不选案例
郭晓湉
04-01 1497
$(function(){    //全选    $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);    });    //全不选    $("#checkNo").click(function(){     $(":checkbox").attr("checked",false);
jquery实现全选和全不选功能
热门推荐
php菜鸟技术天地
09-13 1万+
无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {             //alert("aa");             if ($(this).attr("checked")) { // 全选
JQ checkbox 全选和全不选
06-10
NULL 博文链接：https://onestopweb.iteye.com/blog/2337148
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
jquery实现全选、全不选以及单选功能
12-30
效果图： 代码如下： <link rel=stylesheet href=http://wiki.jikexueyuan.com/project/bootstrap4/dist/css/bootstrap.min.css rel=external nofollow > [removed] [removed] <t
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
05-11
在本篇中，我们将深入探讨如何使用jQuery...为了实现全选和全不选的功能，我们需要一个主复选框（通常标记为“全选”），以及一组相关的子复选框。例如： ```html <input type="checkbox" id="selectAll"> 全选 ...
基于jquery实现复选框全选，反选，全不选等功能
11-26
在本篇文章中，我们将探讨如何利用 jQuery 来实现复选框的全选、反选和全不选等功能。这些功能在各种用户界面中都非常常见，例如在批量操作列表项或进行多选项选择时。 首先，让我们回顾一下示例中的 HTML 结构，它...
利用jQuery实现全选全不选反选
z . s . j
04-01 932
$(function(){  //全选  $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);  });    //全不选  $("#checkNo").click(function(){     $(":checkbox").attr("checked",false);  });
利用jQuery实现CheckBox全选/全不选/反选的简单代码
11-24
jQuery有些版本中实现CheckBox全选/全不选/反选会有bug，经测试jquery-1.3.1.js–>测试通过，jquery-1.5.1.js–>测试不通过。 实现CheckBox全选/全不选/反选代码如下： <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>复选框全选/全不选/反选</title> <meta http-equiv="pragma" conten
用JQuery 实现的全选 反选 全不选
Larvae_的博客
03-19 123
** 用JQuery 实现的全选 反选 全不选 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title&g
jQuery实现 全选/全不选
zhanyouwen的博客
06-04 621
jQuery实现 全选/全不选
在jquery用一个按钮实现全选/全不选的效果（attr和prop的区别使用）
我思故我在
11-26 2515
jquery中prop和attr的区别 全选和全不选的实现
jQuery全选，全不选判断
qq_42400124的博客
08-16 444
jQuery全选，全不选 演示效果： HTML代码 <div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者</
使用jQuery实现全选，全不选和反选的效果
u_u2020的博客
05-16 1118
使用jQuery实现全选，全不选和反选的效果 上一篇我们用的是JavaScript的方法实现这个效果，接下来让我们用jQ uery的方法来实现一下。 首先第一步像上一篇一样，我们来写一下它的布局，现在我用的是radio，他是一个单选框，如果给这几个input标签一个name属性且相同的话，他就只能选择一个，否则它可以选多个，在这里我们不需要name属性，我们现在不用button按钮而用input标签，其实他们的效果都一样，我们只需把input里的type属性改成button就可以了如下： .
jq中最简单全选与全不选
qq_35641923的博客
02-26 3874
id换成对应按钮的id，class为对应input的class $(document).on('click','#id',function(){ if($(this).is(":checked")){ $('.class').prop('checked',true); }else{ $('.class').prop('checked',false...
JQ表格的全选和全不选
云飞扬°的博客
05-18 581
JQ表格的全选和全不选 使用元素选择器：选择器[属性名称=‘属性值’] $("input[type='checkbox']:gt(0)").prop("checked",this.checked); 或者$("input").prop("checked",this.checked); 使用层级选择器 $("tbody > tr ...
介绍js和jq的全选和全不选的表达方式
jx1234562的博客
09-09 148
在这里博主想回答一些以前留下来的问题，jq是js的增强版，就是js的附加类库，那为什么我们要学习jq不是直接学js就可以了吗？今天我回答一下这个问题，jq的功能其实跟js的功能其实都差不多，但是jq的代码非常的简洁，js的一推代码，可能jq就几行，我想作为写代码的人来说，你愿意选择那个，肯定是jq了； 回到本文的主题，我们先来看一下js的全选和全不选，所谓的全选和全不选说的就是，当你勾选一个复选...
react 全选_使用React的Hooks+ts实现全选和全不选？
最新发布
05-31
可以通过使用React的Hooks和TypeScript来实现全选和全不选功能。下面是一个简单的例子： ```tsx import React, { useState } from "react"; interface Item { id: number; name: string; selected: boolean; } interface Props { items: Item[]; } const SelectAll: React.FC<Props> = ({ items }) => { const [selectAll, setSelectAll] = useState(false); const handleSelectAll = () => { const updatedItems = items.map((item) => ({ ...item, selected: !selectAll })); setSelectAll(!selectAll); // 更新items }; const handleSelectItem = (id: number) => { const updatedItems = items.map((item) => item.id === id ? { ...item, selected: !item.selected } : item ); const allSelected = updatedItems.every((item) => item.selected); setSelectAll(allSelected); // 更新items }; return ( <div> <input type="checkbox" checked={selectAll} onChange={handleSelectAll} /> 全选 {items.map((item) => ( <div key={item.id}> <input type="checkbox" checked={item.selected} onChange={() => handleSelectItem(item.id)} /> {item.name} </div> ))} </div> ); }; export default SelectAll; ``` 在这个例子中，`SelectAll`组件接收一个`items`数组作为props，该数组包含`id`、`name`和`selected`属性。`selectAll`状态用于表示是否全选，初始值为`false`。`handleSelectAll`函数用于处理全选/全不选事件，它会将`items`数组中所有元素的`selected`属性设置为`!selectAll`，并更新`selectAll`状态。`handleSelectItem`函数用于处理单个item的选择事件，它会将选中的item的`selected`属性取反，并检查是否所有的item都被选中，如果是，将`selectAll`状态设置为`true`。最后，`SelectAll`组件渲染一个全选的`checkbox`和一个包含所有`item`的列表，每个`item`都有一个选择`checkbox`，当选中一个`checkbox`时，将触发`handleSelectItem`函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值