jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)

代码实例如下:

  
    
    
    My JSP 'practice_02.jsp' starting page
    
	
	
	    
	
	
	
  
  
  	
  	你爱好的运动是?全选/全不选
  	
  	
	  	足球
	  	篮球
	  	羽毛球
	  	乒乓球
	  	
	  	
	  	
	  	
	  	
	  	
  	
  	
	
	var $checkAll = $('#checkAll');
	var $items = $(':checkbox[name=item]');
	//1.点击'全选'，选中所有爱好
	$('#btn1').click(function() {
		$items.prop('checked',true);
		$checkAll.prop('checked',true);
	});
	//2.点击'全不选'，所有爱好都不勾选
	$('#btn2').click(function() {
		$items.prop('checked',false);
		$checkAll.prop('checked',false);
	});
	
	//3.点击'反选'，改变所有爱好的勾选状态
	$('#btn3').click(function() {
		$items.each(function() {
			this.checked = !this.checked;
		});
		//统计没有被选中的个数，如果是0的话
		$checkAll.prop('checked',$items.not(':checked').length==0);
	});
	
	//4.点击'提交'，提示所有勾选的爱好
	$('#btn4').click(function() {
		$items.filter(':checked').each(function() {
			alert(this.value);//this指的是当前被选中的DOM元素
		});
	});
	//5.点击'全选/全不选’，选中所有爱好，或者全不选中
	$checkAll.click(function() {
		$items.prop('checked',this.checked);
	});
	//6.点击某个爱好时，必要时更新‘全选/全不选’的选中状态
	$items.click(function() {
		$checkAll.prop('checked',$items.not(':checked').length==0);
	});
	
	
  

界面效果如下:

测试的话，请读者复制代码自行验证