jQuery实现的全选、反选和不选功能 - 巴巴爸爸和巴巴妈妈的博客

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <title>JQ应用第6款：jQuery实现的全选、反选和不选功能</title>
        <!--start-->
        <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        
        <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
        <![endif]-->
        <script>
            $(function() {
                //全选或全不选
                $("#all").click(function() {
                    if (this.checked) {
                        $("#list :checkbox").prop("checked", true);
                    } else {
                        $("#list :checkbox").prop("checked", false);
                    }
                });
                //全选  
                $("#selectAll").click(function() {
                    $("#list :checkbox,#all").prop("checked", true);
                });
                //全不选
                $("#unSelect").click(function() {
                    $("#list :checkbox,#all").prop("checked", false);
                });
                //反选 
                $("#reverse").click(function() {
                    $("#list :checkbox").each(function() {
                        $(this).prop("checked", !$(this).prop("checked"));
                    });
                    allchk();
                });

                //设置全选复选框
                $("#list :checkbox").click(function() {
                    allchk();
                });

                //获取选中选项的值
                $("#getValue").click(function() {
                    var valArr = new Array;
                    $("#list :checkbox[checked]").each(function(i) {
                        valArr[i] = $(this).val();
                    });
                    var vals = valArr.join(',');
                    alert(vals);
                });
            });

            function allchk() {
                var chknum = $("#list :checkbox").size(); //选项总个数
                var chk = 0;
                $("#list :checkbox").each(function() {
                    if ($(this).prop("checked") == true) {
                        chk++;
                    }
                });
                if (chknum == chk) { //全选
                    $("#all").prop("checked", true);
                } else { //不全选
                    $("#all").prop("checked", false);
                }
            }
        </script>
        <!--end-->

    </head>

    <body>
        <div class="bg-info text-center" style="height:100px;line-height:100px;font-size:26px;font-family: '微软雅黑';">
            JQ应用第6款：jQuery实现的全选、反选和不选功能
        </div>

        <div style="margin-top:50px;">
            <div class="col-xs-3"></div>
            <div class="col-xs-6">



                <!--start-->
                <ul id="list" class="list-unstyled">
                    <li>
                        <input type="checkbox" value="1"> 1.时间都去哪儿了
                    </li>
                    <li>
                        <input type="checkbox" value="2"> 2.海阔天空
                    </li>
                    <li>
                        <input type="checkbox" value="3"> 3.真的爱你
                    </li>
                    <li>
                        <input type="checkbox" value="4"> 4.不再犹豫
                    </li>
                    <li>
                        <input type="checkbox" value="5"> 5.光辉岁月</label>
                    </li>
                    <li>
                        <input type="checkbox" value="6"> 6.喜欢妳
                    </li>
                </ul>

                <input type="checkbox" id="all">
                <input type="button" value="全选" class="btn btn-info " id="selectAll">
                <input type="button" value="全不选" class="btn btn-info "  id="unSelect">
                <input type="button" value="反选" class="btn btn-info "  id="reverse">
                <input type="button" value="获得选中的所有值" class="btn btn-info"  id="getValue">
                <!--end-->




            </div>
            <div class="col-xs-3"></div>
        </div>
    </body>

</html>
文章来时：http://www.ijquery.cn/?p=970
最后由 Leo 编辑于2015年04月23日 22:37