JQuery的全选,全不选,反选!

简介: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
<! 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 >
    
< title ></ title >
    
< link  rel ="stylesheet"  type ="text/css"  href ="Css/Commom.css"   />
    
< script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
    
< script  language ="javascript"  type ="text/javascript" >

        $(
function  () {
            $(
" #selAll " ).click( function  () {
                $(
" .column :checkbox " ).attr( " checked " true );
            });

            $(
" #unSelAll " ).click( function  () {
                $(
" .column :checkbox " ).attr( " checked " false );
            });

            $(
" #reverSel " ).click( function  () {
                
// 遍历.column 下的 checkbox;
                $( " .column :checkbox " ).each( function  () {
                    
// 给当前勾选的checkbox取反;  其中!$(this).attr("checked")是先获取他的属性,再取反,充当第二个参数;
                     // attr方法只有一个参数时是取值,两个参数时是设值;
                    $( this ).attr( " checked " ! $( this ).attr( " checked " ));
                });
            });
        });

    
</ script >
</ head >
< body >
    
< div  class ="column" >
        
< input  id ="Checkbox1"  type ="checkbox"  value ="修改密码"   />
        修改密码
        
< input  id ="Checkbox2"  type ="checkbox"  value ="评论管理"   />
        评论管理
        
< input  id ="Checkbox3"  type ="checkbox"  value ="删除文章"   />
        删除文章
        
< input  id ="Checkbox4"  type ="checkbox"  value ="删除用户"   />
        删除用户
        
< input  id ="Checkbox5"  type ="checkbox"  value ="备份数据"   />
        备份数据
    
</ div >
    
< div  class ="column" >
        
< input  id ="selAll"  type ="button"  value ="全选"   />
        
< input  id ="unSelAll"  type ="button"  value ="全不选"   />
        
< input  id ="reverSel"  type ="button"  value ="反选"   />
    
</ div >
</ body >
</ html >
目录
相关文章
|
9月前
|
JavaScript 前端开发
jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)
jquery的数据增删改查(全选,反选,全不选,批量删除,添加信息)
82 0
|
JavaScript
jquery 使用attr方法对checkBox进行全选和反选操作
一次点击按钮进行全选的时候,checkbox全部选中;再次点击的时候,checkbox取消选中。 第二次,第三次,之后再点击,没有效果,代码也执行。checkbox的checked属性也改变,但是checkbox就是没有 被选中。问题解决办法是把红色部分中的attr方法修改
103 0
|
JavaScript 前端开发 数据库
JQuery 全选 取消 提交
表单: &lt;input type="checkbox" name="check[]" id="check" value={$tbl.Name} /&gt;   &lt;div class="class="btn"&gt;      &lt;a href="javascript:;" class="inputbutx" id="selAll"&gt;全选&lt;/a&gt;
1052 0
|
JavaScript 前端开发
jquery 全选
引用:http://www.cnblogs.com/bynet/archive/2009/11/13/1602491.html   1234全选/取消全选$("#chk_all").click(function(){     $("input[name='chk_list']").
729 0
|
JavaScript 前端开发
Jquery checkbox全选,反选,全不选实例
$(function() { //全选 $("#checkAll").click(function() { $("[name='items']:checkbox").
1018 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0