jquery全选和取消全选

TechWhiz-晓同

已于 2023-07-10 16:30:40 修改

阅读量540

点赞数 1

文章标签： jquery javascript 前端

于 2023-03-01 11:06:28 首次发布

本文链接：https://blog.csdn.net/m0_72603435/article/details/129277062

版权

这段代码展示了如何使用jQuery实现全选和取消全选的功能。当点击全选按钮时，所有单选按钮被选中；单选按钮被点击时，如果全部选中则全选按钮保持选中状态，否则取消全选。代码基于JavaScript的DOM操作和事件监听。

摘要由CSDN通过智能技术生成

其实就这固定的代码在哪都能用，不过需要改一下名称就ok了！

//全选和取消全选
$(function() {//自执行
	$('#select_all').click(function() {//全选按钮
		for (let i = 0; i < $('.radio').length; i++) {//循环单选按钮
			$('.radio').eq(i).prop("checked", $(this).prop("checked")) //单选按钮全选
			$('.radio').eq(i).click(function() {//单选按钮点击事件
				let oneList = $('.radio')//获取所有单选按钮
				for (let p = 0; p < oneList.length; p++) {//循环所有单选按钮
					if (!$(oneList[p]).prop("checked")) {//如果所有单选按钮有一个没背选中则全选按钮取消选中
						$('#select_all').prop("checked", false) //取消全选
						return;
					}
				}
				$('#select_all').prop("checked", true) //全选
			})
		}
	})
})