用jquery实现全选/全不选效果

<!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> 
<script type="text/javascript" language="javascript" src="../jquery-1.7.1.min.js"> 
</script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
   $("#all-yes").click(function(){ 
        $("input[name=fav]").attr("checked","checked"); 
        }); 
    $("#all-no").click(function(){ 
        $("input[name=fav]").attr("checked",false); 
        }); 
    $("#fanxuan").click(function(){ 
        $("input[name=fav]").each(function(){ 
            if(this.checked){ 
                $(this).attr("checked",false); 
                }else{ 
            $(this).attr("checked",true); 
            } 
            }); 
        }); 
       $("#isAll").click(function(){ 
        if(this.checked){ 
        $("input[name=fav]").attr("checked",true); 
            }else{ 
                $("input[name=fav]").attr("checked",false); 
                } 
        }); 
         
         
    }); 
 
</script> 
</head> 
 
<body> 
爱好:<br> 
<input type="checkbox" value="全选/全不选" id="isAll">全选/全不选 
<br> 
<input type="checkbox" name="fav">睡觉 
<input type="checkbox" name="fav">看电视 
<input type="checkbox" name="fav">读书 
<input type="checkbox" name="fav">听音乐<br> 
<input type="button" id="all-yes" value="全选"> 
<input type="button" id="all-no" value="全不选"> 
<input type="button" id="fanxuan" value="反选"> 
</body> 
</html> 
阅读更多
个人分类: jquery
上一篇用jquery实现表格的隔行变色
下一篇用jquery实现可伸缩的表格
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭