jQuery 全選和反選demo

時間 2019-12-05

標籤 jquery 全選 demo 欄目 JQuery 简体版

原文原文鏈接

前段時間作了一個全選和反選的功能，最近不忙了，作了一個簡化版的demo。javascript

所有代碼以下：css

<!DOCTYPE html>
<html>
<head>
    <title>全選反選</title>
    <style type="text/css">
        ul,li{
            list-style: none;
        }
        .btn {
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <ul id="music"></ul>
    <hr>
    <div class="btn">
        <label id="all">
            <input type="checkbox" name="all">全選
        </label>
        <label id="reverse">
            <input type="checkbox" name="reverse">反選
        </label>
    </div>
    <pre></pre>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var data = [
                '01.大海 ',
                '02.天路 ',
                '03.再回首 ',
                '04.忽然的自我 ',
                '05.甘心情願 ',
                '06.光輝歲月 ',
                '07.雨蝶 ',
                '08.愛拼纔會贏 ',
                '09.我只在意你 ',
                '10..日不落'
            ];

            var html = '';
            for(var i = 0; i < data.length; i++){
                html += '<li>'+
                '<input type="checkbox" name="">'+
                '<span>' + data[i] + '</span>'+
                '</li>';
            }
            $('#music').html(html);

            var $all = $('#all input');
            var $reverse = $('#reverse input');

            var $checkboxEl = $('#music').find('input[type="checkbox"]');
            var len = $checkboxEl.length;

            var n = 0; //input checkbox 選中的個數
            $checkboxEl.on('click', function(){
                if($(this).attr("checked") == 'checked'){
                    $(this).attr("checked", false);
                    n--;
                }else{
                    $(this).attr("checked", true);
                    n++;
                }
                allIsChecked();
            });

            $all.on('click', function(){
                if($(this).attr("checked") == 'checked'){
                    $(this).attr("checked", false);
                    $checkboxEl.attr('checked', false);
                    $checkboxEl.prop('checked', false);
                    n = 0;
                }else{
                    $(this).attr("checked", true);
                    $checkboxEl.attr('checked', true);
                    $checkboxEl.prop('checked', true);
                    n = len;
                }
            });

            $reverse.on('click', function(){
                $checkboxEl.each(function(i, el){
                    if($(this).attr("checked") == 'checked'){
                        $(this).attr("checked", false);
                        $(this).prop("checked", false);
                        n--;
                    }else{
                        $(this).attr("checked", true);
                        $(this).prop("checked", true);
                        n++;
                    }
                });
                allIsChecked();
            });

            function allIsChecked(){
                if(n == len){
                    $all.attr('checked', true);
                    $all.prop('checked', true);
                }else{
                    $all.attr('checked', false);
                    $all.prop('checked', false);
                }
            }

        })
    </script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。