jquery全选反选

最新推荐文章于 2023-05-25 08:32:18 发布

hupan_2014

最新推荐文章于 2023-05-25 08:32:18 发布

阅读量361

点赞数

分类专栏： jq 文章标签：全选反选

jq 专栏收录该内容

8 篇文章 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>jquery全选反选</title>
<script language="javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<script>
$(document).ready(function(){
var i=true
var box=$("input:checkbox")
var check1=$("input:button[name='quanxuan']")
var check2=$("input:button[name='fanxuan']")

/* check1.click(function(){
  if(i){
   box.prop("checked",true);
   i=false;
  }else{
   box.prop("checked",false);
   i=true;
  }
});*/
check1.toggle(
  function(){
   box.prop("checked",true);
  },function(){
   box.prop("checked",false);
  }
)
check2.click(function(){
   box.each(function() {
                if($(this).prop("checked")){
     $(this).prop("checked",false)
    }else{
     $(this).prop("checked",true)
    }
            });

});

})
</script>

<body>
<div style="width:500px; height:200px; margin:100px auto;">
<label>
<input type="checkbox" /> 网店美工
</label>
<label>
<input type="checkbox" /> 前端工程师
</label>
<label>
<input type="checkbox" /> 网店美工
</label>
<label>
<input type="checkbox" /> 前端工程师
</label><br />
<input type="button" value="全选" name="quanxuan" />
<input type="button" value="反选" name="fanxuan" />
</div>
</body>
</html>