全选反选以及获取选中的数据

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>演示：jQuery实现的全选、反选和不选功能</title>
    <!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->
    <style>
        .demo {
            width: 520px;
            margin: 40px auto 0 auto;
            min-height: 250px;
        }

        ul li {
            line-height: 30px;
            font-size: 14px
        }

        .btn {
            overflow: hidden;
            display: inline-block;
            *display: inline;
            padding: 4px 20px 4px;
            font-size: 14px;
            line-height: 18px;
            *line-height: 20px;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-color: #5bb75b;
            border: 1px solid #cccccc;
            border-color: #e6e6e6 #e6e6e6 #bfbfbf;
            border-bottom-color: #b3b3b3;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            margin-left: 2px
        }
    </style>
    
</head>

<body>


<div id="main">
    <div class="demo">
        <ul id="list">
            <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
            <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
            <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
        </ul>
        <input type="checkbox" id="all">


        <input type="button" value="获得选中的所有值" class="btn" id="getValue">
    </div>
</div>

<script src="./lib/jquery/jquery-1.12.2.min.js"></script>
<script>
    $(function () {
        //全选或全不选
        $("#all").click(function () {
            if (this.checked) {
                $("#list :checkbox").prop("checked", true);
            } else {
                $("#list :checkbox").prop("checked", false);
            }
        });





        function cheaked() {
            //1. 获取input总个数
            var cheaknum = $('#list input').size();
            //2. 创建一个点击个数
            var xznum = '';

            $('#list input').each(function () {
                //3. 循环inpit  判断是否选中  选中就 ++
                if ($(this).prop('checked') == true) {

                    xznum++
                }
            });

            //4. 如果点击选中个数与总数相同则  $('#all') 状态 选中
            if (cheaknum == xznum) {
                $('#all').prop('checked',true);
            }else{
                $('#all').prop('checked',false);
            };
        };


        $("#list input").click(function () {
            cheaked()
        });
        // 获取选中input的数据
        function  data(){
            $('#list input').each(function () {
               if ($(this).prop('checked')){
                 alert($(this).parent().text());
               }else{return}
           });
        };

        $('.demo :button').click(function () {
            data();
        });
    });

</script>

</body>
</html>
全选反选以及获取选中的数据

猜你喜欢
