关于jQuery中全选,反选的实现

在页面中我们经常要对多条数据选择进行删除或者是选择所有的数据进行删除,如果我们使用jQuery的话,它灵活的选择器可以给我们带来很多方便:

比如我们要实现对下面这个表单的全选和反选功能

关于jQuery中全选,反选的实现

这个表单的代码

<table class="table table-hover">
    <tr>
        <td><input id="all" type="checkbox" onclick="checkall()"/>全选</td>
        <td>名称</td>
        <td>图片</td>
        <td>类别</td>
        <td>价格</td>
        <td>库存</td>
    </tr>
    <c:forEach items="${goods}" var="good">
        <tr>
            <td><input onclick="check()" type="checkbox" value="${good.id}"/></td>
            <td>${good.gname}</td>
            <td>图片</td>
            <td>${good.tid}</td>
            <td>${good.price}</td>
            <td>${good.gsave}</td>
        </tr>
    </c:forEach>
</table>

首先,要实现全选和反选的功能,要从两个方向进行考虑.

(1).当我们将表单中所有的复选框选中后要自动的将全选框选中,如果表单中某个复选框未被选中则全选框不能被选中,实现代码如下

//通过对表单中的复选框的操作来对全选框的进行操作
function check() {
    //通过标签选择器选择所有的被选择中的除全选按钮的CheckBox
    var array = $("input[type='checkbox']:checked:not('#all')");
    //选择除全选框外的所有复选框
    var arrayAll = $("input[type='checkbox']:not('#all')");
    if(array.length == arrayAll.length){
        //两个数组的长度相等,那么就将全选框选中
        $("#all").attr("checked",true);
    }else{
        //两个数组的长度相等,那么就将全选框的checked属性设置为false
        $("#all").removeAttr("checked",false);
    }
}

(2).如果我们点击全选按钮时,要将表单中的所有复选框进行选择,取消时将表单中的复选框取消选择

//通过对全选框的操作对表单中的复选框进行操作
function checkall() {
    //通过对全选按钮的状态进行判断
    var bool = $("#all").attr("checked");
    if(bool){
        //如果全选按钮是选中的那么就将除全选框外所有的CheckBox选中
        $("input[type='checkbox']:not('#all')").attr("checked",true);
    }else{
        //如果全选按钮是选中的那么就将除全选框外所有的CheckBox选中
        $("input[type='checkbox']:not('#all')").attr("checked",false);
    }

}

这样就可以实现表单中全选和反选功能,但有个需要注意的地方就是jquery的版本是否支持对attr属性的操作

关于jQuery中全选,反选的实现

相关推荐