`
liuwei_blog
  • 浏览: 91226 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

复选框全部选中(取消选中)

jQueryJavaScriptCSSHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
    <!-- 样式 -->
    <style type='text/css'>
        #container{}{
            text-align:center;
            padding:50px;
        }
        #container table{}{
            width:500px;
        }
        .center{}{
            text-align:center;
        }
        .td1{}{
            width:100px;
            text-align:left;
            padding-left:30px;
        }
    
    </style>

    <!-- javascript -->
    <SCRIPT LANGUAGE="JavaScript" src='js/jquery-1.2.6.js'></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        // 方法一：用jQuery
        function selectAll_jQuery(obj){
            if(obj.checked == true){
                $.each($('input:checkbox[name="cb"]').get(),function(index,obj){
                    obj.checked  = true;
                });

            }else{
                $.each($('input:checkbox[name="cb"]').get(),function(index,obj){
                    obj.checked  = false;
                });
            }
        }
        
        // 方法二：自己写
        function forEach(obj,fn){
            // fn 必须是 function
            if(typeof(fn) != 'function') return;
            // obj.length 存在并且obj.length > 0
            if(obj.length){
                // 对数组(或具有length的类数组)里的每一项执行 fn
                for(var i = 0,len = obj.length; i < len; i++){
                    // 第一个参数是索引，第二个参数是值
                    fn(i,obj[i]);
                }
            }
            // obj.length 不存在
            if(typeof(obj.length) == 'undefined'){
                fn(0,obj);
            }
        }
        function selectAll(obj){
            // 数组存放要选中(或取消选中)的复选框
            var arrCb = new Array(),
            // 所有的input
            allInput = document.getElementsByTagName('input');
            // 筛选出我们想要的复选框
            forEach(allInput,function(i,value){
                // type = 'checkbox' 且 name = 'cb'
                if(value.type.toLowerCase() == 'checkbox' && value.name == 'cb')
                    // 存入arrCb中
                    arrCb.push(value);
            }); 
            // 全选
            if(obj.checked == true){
                // 选中每个复选框
                forEach(arrCb,function(index,value){
                    value.checked  = true;
                });
            }else{ // 全不选
                // 取消选中每个复选框
                forEach(arrCb,function(index,value){
                    value.checked  = false;
                });
            }
        }
    //-->
    </SCRIPT>

 </HEAD>

 <BODY>
    <div id='container'>
      <table border=1 id='table1'>
        <tr>
            <th class='td1'><input type=checkbox id='selectAll' onclick='selectAll(this)'><label for='selectAll'>全选</label></th>
            <th>text</th>
        </tr>
        
        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>11111</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>22222</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>33333</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'></td>
            <td class='center'>44444</td>
        </tr>

      </table>

    </div>
 </BODY>
</HTML>
 
分享到：
| csdn文章内容显示与折叠
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics