jQuery checkbox全选

解决checkbox全选与取消全选问题的JavaScript代码示例

最新推荐文章于 2021-03-10 19:26:35 发布

原创最新推荐文章于 2021-03-10 19:26:35 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #input #each

jQuery 同时被 3 个专栏收录

56 篇文章

订阅专栏

前端开发

47 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

本文提供了一段JavaScript代码，用于处理通过click事件实现的checkbox全选与取消全选功能。同时，文章还讨论了在使用toggle方法时遇到的问题，并给出了解决方案。

通过checkbox 进行全选和取消全选的操作，如果通过toggle进行处理，则会出现checkbox无法显示对勾的问题。

使用click事件，根据checked属性进行判断即可。

示例：

       $("#chkRreviewOffline").click(function(){
		if(this.checked){
			$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
				this.checked=true;
			});
		}else{
			$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
				this.checked=false;
			});
		}
	});
	
	$('#review-offline .btn_checkbox input[type=checkbox]').each(function(index){
		$(this).click(function(){
			if(this.checked){
				//console.log('checked');
			}else{
				//console.log('not checked');
				$("#chkRreviewOffline").get(0).checked=false;
			}
		});
	});

其中，下面的each()方法用于当页面其它的checkbox有未选中状态，则全选状态取消。