使用JQuery做一组复选框的功能。

之前做过复选框的功能，奈何笔记丢失，害的我又鼓捣了一番。。。还是博客园做笔记比较好。

假设现在有一个表格，每一行都有一个复选框按钮。在表头还有一个全选的复选框按钮。

①、当点击一个全选按钮时，下面的同组的复选框都被选中，再点击时取消全选，下面同组的所有复选框都取消。

②、当下面的所有选项都被选中时上面的全选框自动变为选中状态。当下面有一个选项的处于未选中状态时，上面的全选按钮自动变为未选中状态。

下面是表格的代码

<table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <td><input type="checkbox" name="test1" id="quanxuan" />全选</td>
            <td>姓名</td>
            <td>省份</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="test1" id="yi" class="item" /></td>
            <td>张三</td>
            <td>福建</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="test1" id="er" class="item" /></td>
            <td>李四</td>
            <td>广东</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="test1" id="san" class="item" /></td>
            <td>王五</td>
            <td>江苏</td>
        </tr>

    </table>

下面是代码形成的表格

 

一、实现点击全选按钮时，下面的选项全被选中，再次点击，取消全选时，下面的选项全部处于未选中状态。

<script type="text/javascript">
    $(function(){
        $("#quanxuan").click(function(){
            var isCheck = $(this).prop("checked");
            if(isCheck){
                alert("全选");
                var items = $(".item");
                
                for(var i = 0; i < items.length; i++){
                    $(items[i]).attr("checked",true);
                }
            }else{
                alert("取消全选");        
                
                var items = $(".item");
                for(var i = 0; i < items.length; i++){
                    $(items[i]).attr("checked",false);
                }
                
            }
        });
    })
</script>

在这个过程犯了一个低级错误。for循环里面的代码：

$(items[i]).attr("checked",false);//正确的

被我写成了

$(items[i].attr("checked",false));//错误的

搞了半天没发现错误。。。。。JavaScript真的很讨厌。写js代码总会有一股煞气堵在胸口的感觉。

二、现在添加功能：当下面的所有选项都被选中时上面的全选框自动变为选中状态。当下面有一个选项的处于未选中状态时，上面的全选按钮自动变为未选中状态。

下面是完整的js代码：

<script type="text/javascript">
    $(function(){
        $("#quanxuan").click(function(){
            var isCheck = $(this).prop("checked");
            if(isCheck){
                var items = $(".item");
                
                for(var i = 0; i < items.length; i++){
                    $(items[i]).attr("checked",true);
                }
            }else{
                
                var items = $(".item");
                for(var i = 0; i < items.length; i++){
                    $(items[i]).attr("checked",false);
                }
                
            }
        });
        $(".item").click(function(){
            //检查是不是所有的选项都被选中了，如果是，将全选按钮设置为选中状态。否则设为未选中状态。
            var items = $(".item");
            var flag = true;
            for(var i = 0; i < items.length; i++){
                var isChecked = $(items[i]).prop("checked");
                if(!isChecked){
                    //将flag设为false，表示未全选。
                    flag = false;
                }
            }
            if(flag){
                $("#quanxuan").attr("checked", true);
            }else{
                $("#quanxuan").attr("checked", false);
            }
        });
    })
</script>