代码改变世界

“全选”，“反选”功能的实现。

2011-07-21 15:24  Rollen Holt  阅读(928)  评论(0)  编辑  收藏  举报

假如一开始：

点击反选之后：

点击全选之后：

点击提交之后

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

 <!--   引入jQuery -->

 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script type="text/javascript">

  $(function(){

     //全选

     $("#CheckedAll").click(function(){

	     $('[name=items]:checkbox').attr('checked', true);

	 });

	 //全不选

     $("#CheckedNo").click(function(){

	    $('[type=checkbox]:checkbox').attr('checked', false);

	 });

	 //反选

     $("#CheckedRev").click(function(){

		  $('[name=items]:checkbox').each(function(){

			//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。

			//$(this).attr("checked", !$(this).attr("checked"));

			

			//直接使用JS原生代码，简单实用

			this.checked=!this.checked;

		  });

	 });

	 //输出值

	$("#send").click(function(){

		var str="你选中的是：\r\n";

		$('[name=items]:checkbox:checked').each(function(){

			str+=$(this).val()+"\r\n";

		})

		alert(str);

	});

  })



  </script>

</head>

<body>

<form method="post" action="">

   你爱好的运动是？

   <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="CheckedAll" value="全　选"/>

    <input type="button" id="CheckedNo" value="全不选"/>

    <input type="button" id="CheckedRev" value="反　选"/> 



	<input type="button" id="send" value="提　交"/> 

</form>

</body>

</html>