关闭

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

标签: jqueryinputfunctionjavascriptbuttonxhtml
495人阅读 评论(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> 
<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> 
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:182401次
    • 积分:2237
    • 等级:
    • 排名:第16795名
    • 原创:84篇
    • 转载:0篇
    • 译文:1篇
    • 评论:24条
    文章分类
    最新评论