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

原创 2012年03月26日 18:48:48
<!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实现的全选反选全不选等等的效果源码

test.html:(下载测试的话是必须配置下jquery的文件的。即是: 这个语句需要修改) $(function(){ //全选 $("#CheckedAll").click...
  • gayayzy
  • gayayzy
  • 2012年07月12日 17:25
  • 1208

jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 全选、反选、全不选 $(function(){     $("#btn_all").click(function(){     ...

jQuery实现的Checkbox“全选/全不选”

自己实现的checkbox全选/全不选
  • cqdzdj
  • cqdzdj
  • 2014年08月17日 11:36
  • 664

jquery实现复选框的全选与全不选功能 .

一:1)引进jquery-1.6.4.min.js文件 2)效果图如下: a)默认情况: b)点击全选后并点击提交按钮后: c)当点击个别按钮时: 二:代码示例如下:...

jquery实现checkbox全选/全不选

用原生态的JavaScript操作页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也不难写。但使用jQuery实现则非常简单,代码很简洁-write less,do more! ...

jQuery实现全选、全不选和反选,没有只能选一次的bug

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦: 第一个比较不常用 的用button来做得全选全不选和反选按钮...

JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应...

Jquery实现checkbox的全选,全不选,反选,提交

参考链接:http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html Jquery实现checkbox的全选,全不选,反选,提交;...
  • J_ijava
  • J_ijava
  • 2014年12月03日 10:37
  • 344
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery实现全选/全不选效果
举报原因:
原因补充:

(最多只允许输入30个字)