用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实现全选和全不选功能

无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {       ...
  • haibo0668
  • haibo0668
  • 2016年09月13日 15:45
  • 2262

利用jQuery实现全选全不选反选

$(function(){  //全选  $("#checkAll").click(function(){     $(":checkbox").attr("checked",true);  ...
  • zsj523
  • zsj523
  • 2013年04月01日 19:19
  • 626

javascript实现全选全不选

在JSP页面中有6个复选框,第一个复选框是全选和全不选,其余5个为普通复选框,当点击全选复选框后,普通复选框将被全部选中,如果再次点击 全选复选框,那么普通复选框将被全部不选中,同时,如果全选复选框在...
  • u011740475
  • u011740475
  • 2014年12月05日 10:21
  • 1928

一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果!...
  • yerenyuan_pku
  • yerenyuan_pku
  • 2017年05月10日 20:55
  • 813

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

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

jquery实现全选 全不选效果

xmlns="http://www.w3.org/1999/xhtml">     http-equiv="Content-Type" content="text/h...
  • qq_40447559
  • qq_40447559
  • 2017年09月29日 21:26
  • 46

JQuery实现全选全不选效果

                    Untitled Document               
  • albert_lz
  • albert_lz
  • 2011年04月06日 21:18
  • 497

js 实现全选、全不选、反选功能

不多说,直接上代码,复制直接可以使用 无标题文档 function selectAllNullorReserve(obj,type){ if(obj!=null&&obj!=""){ ...
  • wolinxuebin
  • wolinxuebin
  • 2012年05月30日 14:02
  • 14338

jQuery_review之jQuery实现多选框的反选、全选、全不选

有几个非常常见的知识点,需要重点关注一下。如何显示多选框呢?。这样就能表示两个多选框,他们具有同样的name值,在JSP中,传到后台的时候,可以使用request.getParameterValues...
  • ziwen00
  • ziwen00
  • 2014年07月25日 21:10
  • 3531

JavaScript实现复选框全选与全不选的效果

//里面涉及到几张图片,有需要的可以联系我要,直接私信我就行,每天在这个点都会上线,看到就回,或者从我的资料里面找我的联系方式,收到之后会发给你们的 全选效果 .bg{ backgrou...
  • qq_34137397
  • qq_34137397
  • 2016年10月25日 23:59
  • 446
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery实现全选/全不选效果
举报原因:
原因补充:

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