用mootools实现checkbox全选功能

全选与单选按钮交互优化：JavaScript实现

最新推荐文章于 2020-07-27 19:22:27 发布

最新推荐文章于 2020-07-27 19:22:27 发布 · 202 阅读

本文详细介绍了如何使用JavaScript实现全选与单选按钮的交互功能，包括全选按钮与单个选项按钮之间的联动效果，以及如何通过事件监听实现选择状态的实时更新。

全选时，所有的单个checkbox都要选中，反过来也可以实现

//全选按钮
	$('chkall').addEvent('click',function(){
		$$('input[name="itemchk"]').each(function(item){
			if($('chkall').checked){	
				item.checked = 'checked';
			}else{
				item.checked = '';
			}
		});
	});
	//ITEM 按钮
	$$('input[name="itemchk"]').each(function(item){
		item.addEvent('click',function(){
			if(item.checked){
				var i = 0;
				$$('input[name="itemchk"]').each(function(chk){
					if(chk.checked == ''){
						i=i+1;
					}
				});
				if(i == 0){
					$('chkall').checked = 'checked';
				}	
			}else{
				$('chkall').checked = '';
			}
		});
	});

测试完全OK。