本文介绍了一种使用JavaScript和jQuery实现全选功能的方法。通过自定义的forEach函数和jQuery的选择器来控制一组复选框的状态，提供了两种不同的实现方式。
Code
<!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>
扫一扫
1351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
