jQuery全选反选

项目使用freemarker
checkbox复选框的个数是依据从数据库中取出值的条数决定的，是list循环遍历出来的。

界面

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
    <tr>
        <td colspan="3" align="center" >
            <strong>
                <input type="checkbox" name="checkAll" id="checkAll" onclick="checkAll23();"/>全选/反选
            </strong>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="border-top:1px solid #fff;" ></td>
    </tr>
<#list page.list as item>
    <tr>
        <td>
            <input type="checkbox" id="check" name="check"  value="<#if item.id?exists>${item.id}</#if>"/>
        </td>
    </tr>
</#list>
</table>

实现全选

$(document).ready(function(){
    //全选
    $("#checkAll").click(function() {//全选框
        if($(this).is(":checked")) {//选中，全选
            $("input[name='check']").each(function() {
                this.checked = true;
            });
        } else {//未选中，全不选
            $("input[name='check']").each(function() {
                this.checked = false;
            });
        }
    });
    $("input[name='check']").click(function() {//其他选择框
        if($(this).is(":checked")) {
            var flag = true;
            $("input[name='check']").each(function() {
                if(this.checked==false) {
                    flag = false;
                }
            });
            if(flag==true) {//全部选中，全选框选中
                document.getElementById("checkAll").checked = true;
            }
        } else {//取消选中，全选框不选中
            $("#checkAll").attr("checked", false);
        }
    });
});

全选和反选

在全部选择状态下，选中全选/反选框，有一个未选中则不选中全选/反选框，同时实现反选的功能。
更好的选择是：将全选和反选分别提供一个按钮。

$(document).ready(function(){
    //加载进来就是全选的情况 --start
    var flag1 = true;
    $("input[name='check']").each(function() {
        if(this.checked==false) {
            flag1 = false;
        }
    });
    if(flag1==true) {
        document.getElementById("checkAll").checked = true;
    }//--end
    $("input[name='check']").click(function() {
        if($(this).is(":checked")) {
            var flag = true;
            $("input[name='check']").each(function() {
                if(this.checked==false) {
                    flag = false;
                }
            });
            if(flag==true) {
                document.getElementById("checkAll").checked = true;
            }
        } else {
            $("#checkAll").attr("checked", false);
        }
    });
});

//全选反选
function checkAll23(){
    //反选
    $("#checkAll").prop("disabled",'true');
    $("input[name='check']").each(function(){
        if($(this).is(":checked")){
            $(this).removeProp("checked");
        }else{
            $(this).prop("checked",'true');
        }
    });
    $("#checkAll").removeProp("disabled");

    //上面的在 遨游浏览器中出现问题
    //--可换用下方代码--start
    var names=document.getElementsByName("check");
    var len=names.length;
    if(len>0){
        var i=0;
        for(i=0;i<len;i++){
            if(names[i].checked)
                 names[i].checked=false;
             else
                 names[i].checked=true;
        }
    }
    //----end
    //检查全选/反选框是否应该被选中
    var flag = true;
    $("input[name='check']").each(function() {
        if(this.checked==false) {
            flag = false;
        }
    });
    if(flag==true) {
        document.getElementById("checkAll").checked = true;
    } else {
        $("#checkAll").attr("checked", false);
    }
}