您的位置：首页 > Web前端 > JQuery

jquery_笔记checkbox的操作，全选，反选，

2012-12-10 22:11 609 查看 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JsBin-在线js/css调试工具</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
<script type="text/javascript">
<!--全选-->
$(document).ready(function(){
  //$("#checkedAll").click(function(){
  //	$("input[name=items]").attr("checked","true");
  //});
  <!--全选方法二-->
  $("#checkedAll").click(function(){
		$("input[name=items]").each(function(index,DomEle){
			$(this).attr("checked","true");
		});
	});
  <!--全不选-->
  	$("#checkedNo").click(function(){
		$("input[name=items]").attr("checked",false)//attr("checked",null);
	});
  	<!--反选-->
	$("#checkedRev").click(function(){
      $("input[name=items]").each(function(index,DomEle){
      if(this.checked){
			$(this).attr("checked",null);
		}else{
			$(this).attr("checked","checked");
		}
      });
	});
  <!--全选、全不选-->
	$("#Allchecked").click(function(){
		if(this.checked){
			$("input[name=items]").attr("checked","checked");
		}else{
			$("input[name=items]").attr("checked",null);
		}
	});
});
</script>
</head>
<body>
     <input type="checkbox"  id="Allchecked" name="item" value="全选/全不选"/>全选/全不选<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="反选"><br>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航