JQuery小案例之 全选，全不选，反选，提交按钮的小实例

效果图：

form表单：

		你爱好的运动是：
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>

JQuery实现代码：


	<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/* 
功能需求：
	①全选按钮：点击后所有爱好都选中
	②全不选按钮：点击后所有爱好都不选中
	③反选按钮：点击后所有爱好选中状态反转
	④提交按钮：点击后依次弹出选中内容
	
	* 操作checked属性
		DOM:this.checked
			取值赋值:true|false
		jQuery:$(this).attr("checked");
			取值赋值:checked|undefined
*/
	$(function(){
		//①全选按钮：点击后所有爱好都选中
		$("#checkedAllBtn").click(function(){
			$(":checkbox").attr("checked",true);
		});
		//②全不选按钮：点击后所有爱好都不选中
		$("#checkedNoBtn").click(function(){
			$(":checkbox").attr("checked",false);
		});
		//③反选按钮：点击后所有爱好选中状态反转
		$("#checkedRevBtn").click(function(){
			var $cc=$(":checkbox");
			$cc.each(function(){
				this.checked=!this.checked;
			});
		});
		//④提交按钮：点击后依次弹出选中内容
		$("#sendBtn").click(function(){
			$(":checkbox:checked").each(function(){
				alert(this.value);
			});
		});
	});
	
</script>