jquery 全选,反选复选框

最新推荐文章于 2023-08-18 18:19:47 发布
最新推荐文章于 2023-08-18 18:19:47 发布
阅读量180 收藏
点赞数
分类专栏： jQuery 文章标签： checkbox jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44378358/article/details/108262605
版权 
<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>我的购物车-品优购</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/car.css">
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>

	<body>

		<div class="car-header">
			<div class="w">
				<div class="car-logo">
					<img src="img/logo.png" alt="">
					<b>购物车</b>
				</div>
			</div>
		</div>

		</div>
		<div class="c-container">
			<div class="w">
				<div class="cart-filter-bar">
					<em>全部商品</em>
				</div>
				<!-- 购物车主要核心区域 -->
				<div class="cart-warp">
					<!-- 头部全选模块 -->
					<div class="cart-thead">
						<div class="t-checkbox">
							<input type="checkbox" name="" id="" class="checkall"> 全选
						</div>
						<div class="t-goods">商品</div>
						<div class="t-price">单价</div>
						<div class="t-num">数量</div>
						<div class="t-sum">小计</div>
						<div class="t-action">操作</div>
					</div>
					<!-- 商品详细模块 -->
					<div class="cart-item-list">
						<div class="cart-item check-cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" checked class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p1.jpg" alt="">
								</div>
								<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
							</div>
							<div class="p-price">￥12.60</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">￥12.60</div>
							<div class="p-action">
								<a href="javascript:;">删除</a>
							</div>
						</div>
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p2.jpg" alt="">
								</div>
								<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
							</div>
							<div class="p-price">￥24.80</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">￥24.80</div>
							<div class="p-action">
								<a href="javascript:;">删除</a>
							</div>
						</div>
						<div class="cart-item">
							<div class="p-checkbox">
								<input type="checkbox" name="" id="" class="j-checkbox">
							</div>
							<div class="p-goods">
								<div class="p-img">
									<img src="upload/p3.jpg" alt="">
								</div>
								<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
							</div>
							<div class="p-price">￥29.80</div>
							<div class="p-num">
								<div class="quantity-form">
									<a href="javascript:;" class="decrement">-</a>
									<input type="text" class="itxt" value="1">
									<a href="javascript:;" class="increment">+</a>
								</div>
							</div>
							<div class="p-sum">￥29.80</div>
							<div class="p-action">
								<a href="javascript:;">删除</a>
							</div>
						</div>
					</div>

				</div>
				<!-- 结算模块 -->
				<div class="cart-floatbar">
					<div class="select-all">
						<input type="checkbox" name="" id="" class="checkall">全选
					</div>
					<div class="operation">
						<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
						<a href="javascript:;" class="clear-all">清理购物车</a>
					</div>
					<div class="toolbar-right">
						<div class="amount-sum">已经选<em>1</em>件商品</div>
						<div class="price-sum">总价： <em>￥12.60</em></div>
						<div class="btn-area">去结算</div>
					</div>
				</div>
			</div>

		</div>

	</body>
	<script>
        $(function () {
            // 1. 全选 全不选功能模块
            // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
            // 事件可以使用change
            $(".checkall").change(function () {
                // console.log($(this).prop("checked"));
                $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            });
            // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
            $(".j-checkbox").change(function () {
                // if(被选中的小的复选框的个数 === 3) {
                //     就要选中全选按钮
                // } else {
                //     不要选中全选按钮
                // }
                // console.log($(".j-checkbox:checked").length);
                // $(".j-checkbox").length 这个是所有的小复选框的个数
                if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                    $(".checkall").prop("checked", true);
                } else {
                    $(".checkall").prop("checked", false);
                }
            });
        })
	</script>

</html>
黄大仙No.1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
jquery复选框CHECKBOX全选、反选
01-19
使用方法:我们先把下面的JS保存为有个文件,到时候调用，淡然你也可以直接写在页面内,推荐使用前者,方便重用: 代码如下:(function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ ...
jQuery实现全选与反选的功能 （附带jQuery jar包）
weixin_44657829的博客
05-10 260
jQuery实现全选与反选的功能（js实现：https://blog.csdn.net/weixin_44657829/article/details/105740105） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.0.js"
jquery 修改购物车小计,添加加减功能
黄大仙
08-27 425
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/common.css"> <link rel=".
jQuery怎么全选 反选 全不选
yushu778的博客
03-18 1545
教程方法解析
jquery实现复选框全选、反选
姚家威的博客
05-18 2940
HTML: <input id="all" type="checkbox" value="" /> <label for="all">全选</label> <input id="fan" type="checkbox" value="" /> <label for="fan">反选</label> <button id="getValue">获得所有选中值</button> <ul class="lis
jquery全选反选复选框+批量删除
weixin_30883777的博客
12-07 170
<li id="all_del"><span><img src="__ADMIN__/images/t03.png" /></span>删除</li> <table class="tablelist"> <thead> &lt...
jQuery和DOM-实现复选框的全选反选
weixin_62971115的博客
08-18 103
【代码】jQuery和DOM-实现复选框的全选反选。
jquery实现全选反选
weixin_55297198的博客
04-15 2431
2、取消全选（全不选）
使用jquery书写全选反选复选框
weixin_47558015的博客
05-10 118
$(function() { // 全选框 $('.checkall').change(function() { // console.log($(this).prop('checked')); $('.j-checkbox ,.checkall').prop('checked', $(this).prop('checked')) }) // 判断小复选框都被选中后全选也被选中 $('.j-checkb.
Jquery实现全选反选
weixin_48340600的博客
09-29 419
1、根据全选按钮状态决定复选框状态 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) }) 2、当复选框状态发生变化时，判断被选中复选框的数量是否等于复选框的数量；等于则把全选框的状态改为true；反之为false 完整代码： $(function () { // 1. 全选 全不选功能模块 // 就
基于jQuery实现复选框的全选 全不选 反选功能
12-11
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下:  $(function(){  $(“#checkedAll”).click(function(){  $(‘[name=items]:checkbox’)...
三个基于jQuery的JS复选框全选反选例子
05-12
摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...
JQuery实现列表中复选框全选反选功能封装(推荐)
10-21
总结来说，JQuery实现列表中复选框全选反选功能封装是一个很好的实践，它展示了如何利用JQuery操作DOM和事件监听的能力来实现高效和用户友好的界面交互。通过合理使用自定义属性和选择器，可以显著降低HTML结构和...
jquery css方法的三种使用,调用时可以传入对象
黄大仙
08-26 603
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> <style> div { width: 200px; height: 200px; } &
jquery 拷贝对象
黄大仙
08-28 548
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend ()方法 语法∶ $.extend ( [deep], target, object1，[object]) 1.deep:如果设为true为深拷贝，默认为false浅拷贝 2.target:要拷贝的目标对象 3.object1:待拷贝到第一个对象的对象。 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
jquery 待办事项
黄大仙
08-29 438
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /.
jquery 遍历数据
黄大仙
08-27 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.5.1.min.js"></script> </head> <body> <div>1</div> <div>2
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： ...请注意，上述代码中的`#checkBoxList`是一个包含多个复选框的父元素的ID，`#selectAll`、`#invertSelect`和`#unselectAll`分别是全选、反选和不选的按钮的ID。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值