jQuery全选和范选，按钮样式变化及取选中项的值

最新推荐文章于 2023-03-29 10:49:48 发布

呼呼伙伴

最新推荐文章于 2023-03-29 10:49:48 发布

阅读量525

点赞数

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/baidu_33163851/article/details/53861015

版权

Javascript 专栏收录该内容

24 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>test</title>
    <style>
        li {
            list-style: none;
        }
        a:link,a:visited {
            color: aquamarine;
        }
        a.btn {
            border: 1px solid #ccc;
            color: #cccccc;
            padding: 6px 10px;
            text-decoration: none;
            font-size: 12px;
        }
        a.btnclick {
            border: 1px solid #7b7b7b;
            color: #7B7B7B;
            padding: 6px 10px;
            text-decoration: none;
            font-size: 12px;
        }
        a.btnclick:hover {
            border: 1px solid #bd4c1b;
            color: #bd4c1b;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="table">
    <div id="check">
        <input id="one" type="checkbox" name="check" value="001"/>全选
        <a id="pass" href="#" class="btn">通过</a>
        <a href="#" class="btn">驳回</a>
        <a href="#" class="btn">关闭</a>
    </div>
    <ul>
        <li>
            <input class="cc" type="checkbox" name="box" value="100第1个"/>第1个
        </li>
        <li>
            <input class="cc" type="checkbox" name="box" value="200第1个"/>第2个
        </li>
        <li>
            <input class="cc" type="checkbox" name="box" value="300第1个"/>第3个
        </li>
        <li>
            <input class="cc" type="checkbox" name="box" value="400第1个"/>第4个
        </li>
    </ul>
    <button id="btn">点击获取列表数据</button>
    <p id="lab"></p>
</div>

<script>
    $(function () {
        //全选和全不选
        $('#one').click(function () {
            if (this.checked) {
                $(".cc[type=checkbox]").prop("checked", true);
                $('#check a').removeClass('btn').addClass('btnclick');
            } else {
                $(".cc[type=checkbox]").prop("checked", false);
                $('#check a').addClass('btn').removeClass('btnclick');
            }
        });
        function allCheck(){
            var chknum = $(".cc[type=checkbox]").size();//选项总个数
            var chk = 0;
            $(".cc[type=checkbox]").each(function () {
                if($(this).prop("checked")==true){
                    chk++;
                }
            });
            if(chknum==chk){//全选
                $("#one").prop("checked",true);
            }else{//不全选
                $("#one").prop("checked",false);
            }
        }
        //设置全选复选框
        $(".cc[type=checkbox]").click(function () {
            allCheck();
            //按钮样式控制
            if ( $(".cc:checked").length >0 ){
                $('#check a').removeClass('btn').addClass('btnclick');

            }else {
                $('#check a').addClass('btn').removeClass('btnclick');
            }

        });
        //获取选中项的值
        function checkVal() {
            var arrVal = [];
            $(".cc:checked").each(function (i) {
                arrVal[i] = $(this).val();
            });
            console.log(arrVal);
        }
        /*$('#btn').click(function () {
            var arr = [];
            $(".cc:checked").each(function (i) {
                arr[i] = $(this).val();
            });
            console.log(arr);
            var tt = arr.join('<br>');
            $('#lab').html(tt);
        });*/

        $('#check #pass').click(function () {
            checkVal();
        })
    })
</script>
</body>
</html>