《JQuery》实现同一个复选框checkbox一键全选和一键取消

每天八杯水D

于 2022-09-15 08:45:31 发布

阅读量444

点赞数 1

分类专栏： Web前端开发文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_45947938/article/details/124738353

版权

Web前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

给全选复选框添加点击事件

HTML代码：

<input  type="checkbox"  id="ckall" onclick="checkall()"/>全选
<input  type="checkbox" class="ckitem" />学习
<input  type="checkbox" class="ckitem" />吃饭
<input  type="checkbox" class="ckitem" />打游戏
<input  type="checkbox" class="ckitem" />运动

JS代码：

function checkall(){
		// 判断全选按钮是否被选中checked
		if($("#ckall").is(":checked") == true){
			$(".ckitem").each(function(){
				$(this).prop("checked",true);	// 通过prop()函数设置复选框的选中状态
			})
		}
		else{
			$(".ckitem").each(function(){//each是循环遍历
			$(this).prop("checked",false);
		  })
		}
}