当前位置:asp编程网>技术教程>Javascript教程>  正文

jquery通过attr和removeAttr来实现全选的方法

2012-06-07 13:34:39   来源:www.aspbc.com    作者:wangsdong   浏览量:2077   收藏

jquery实现全选的功能非常简单,这里这个例子主要是介绍一下jquery的attr和removeAttr两个方法的应用。这里有两个jquery实现全选的方法,都通过了测试,把以下的代码保存为html文件,双击打开就可以看到效果了,测试一个写法是否正确,需要把另一个写法的代码注释掉,使用/*  */来注释。

<script src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function () {		
		//写法一		
		//全选或全不选
		/*$("#chkAll").click(function () {//当点击全选框时
			var flag = $("#chkAll").attr("checked");//判断全选按钮的状态		
			$("[name='Item']").each(function(){
				$(this).attr("checked",flag);				
			});
		});	*/
		
		//写法二
		$("#chkAll").click(function () {//当点击全选框时
			var flag = $("#chkAll").attr("checked");//判断全选按钮的状态		
			$("[name='Item']").each(function(){
				if(flag)
				{
					$(this).attr("checked","checked"); //设置选中
				}
				else
				{
					$(this).removeAttr("checked");   //去掉选中
				}
			});
		});		
	});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1">
    <tr>
      <td><input type="checkbox" name="Item" id="chkAll" />
        全选 </td>
      <td>内容</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Item" id="checkbox2" />
        1</td>
      <td>1</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
        2</td>
      <td>2</td>
    </tr>
     <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
        3</td>
      <td>3</td>
    </tr>
     <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
        4</td>
      <td>4</td>
    </tr>
     <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
        5</td>
      <td>5</td>
    </tr>
     <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
      6</td>
      <td>6</td>
    </tr>
     <tr>
      <td><input type="checkbox" name="Item" id="checkbox3" />
        7</td>
      <td>7</td>
    </tr>
  </table>
</form>
(鼠标移到代码上去,在代码的顶部会出现四个图标,第一个是查看源代码,第二个是复制代码,第三个是打印代码,第四个是帮助)


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网