jQuery--checkbox全选/取消全选

用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！

jQuery版本：1.3.2

 1 <html>
 2 <head>
 3 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 4 </head>
 5 <body>
 6 <input type="checkbox" name="chk_list" id="chk_list_1" value="1" />1<br />
 7 <input type="checkbox" name="chk_list" id="chk_list_2" value="2" />2<br />
 8 <input type="checkbox" name="chk_list" id="chk_list_3" value="3" />3<br />
 9 <input type="checkbox" name="chk_list" id="chk_list_4" value="4" />4<br />
10 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
11 <script type="text/javascript">
12 $("#chk_all").click(function(){
13      $("input[name='chk_list']").attr("checked",$(this).attr("checked"));
14 });
15 </script>
16 </body>
17 </html>

jQuery.attr 获取/设置对象的属性值,如：

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态（是否选中）

$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

再如：

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

下面的代码是获取上面实例中选中的checkbox的value值:

1 <script type="text/javascript">
2     //获取到所有name为'chk_list'并选中的checkbox(集合)
3     var arrChk=$("input[name='chk_list]:checked");
4     //遍历得到每个checkbox的value值
5     for (var i=0;i<arrChk.length;i++)
6     {
7          alert(arrChk[i].value);
8     }
9 </script>

View Code

用$.each()

1 <script type="text/javascript">
2     var arrChk=$("input[name='chk_list']:checked");
3     $(arrChk).each(function(){
4        window.alert(this.value);                        
5     }); 
6 });
7 </script>

1 <script type="text/javascript">
2     $("#chk_all").click(function(){
3         $("input[name='chk_list']").attr("checked",$(this).attr("checked"));
4          
5         $("input[name='chk_list']").each(function() {
6             window.alert(this.value);
7         });
8     });
9 </script>

View Code

其他网友的

//全选、取消全选的事件
    function selectAll() {
//#checkedAll是全选的那个checkbox
        if ($("#checkedAll").attr("checked")) {
//：checkbox  是选中了所有的<input> type为 checkbox的对象
            $(":checkbox").attr("checked", true);
        } else {
            $(":checkbox").attr("checked", false);
        }
    }

下面两种方式差不多

   $(function() {
           $("#checkAll").click(function() {
                $('input[name="subBox"]').attr("checked",this.checked); 
            });
            var $subBox = $("input[name='subBox']");
            $subBox.click(function(){
                $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
            });
        });

javascript

1 //设置全选或取消全选
 2 //需要参数cb：即“全选”复选框，函数需要知道此复选框是否处于选定状态
 3 function selectAll(cb){
 4     //选择数据表中的所有记录行前的checkbox
 5     var cbList = document.getElementsByName('adminID');
 6     
 7     for(var i=0; i<cbList.length; i++){
 8         cbList[i].checked = cb.checked;
 9     }
10 }