4

大きなテーブルが生成されており、各行にはチェックボックス、クラス「chcktbl」があります。

テーブル ヘッダーには、[すべて選択] チェックボックス、クラス「chckHead」があります。

すべての選択/選択解除機能は正常に機能し、表の見出しに表示した選択したグラフの数も同様です。

Shift+クリックで一連のチェックボックスを選択できるようにする関数も機能しますが、現在の形式では、ポップアップ ウィンドウにエラー メッセージを生成する前に 10 個のチェックボックスしか選択できません。

「このスクリプトの実行を停止しますか? このページのスクリプトにより、Web ブラウザの実行速度が低下しています。実行を続けると、コンピュータが応答しなくなる可能性があります。」

<script type=text/javascript>


        //select all button
        $('#chckHead').click(function() {

            if (this.checked === false) {
                $('.chcktbl:checked').attr('checked', false);
            }
            else {
                $('.chcktbl:not(:checked)').attr('checked', true);
            }
            countSelected();

        });

//count number of boxes checked        
function countSelected() {
            var numCharts = $('input.chcktbl:checked').length;
            $('#numCharts').html(numCharts);

        }


        //SHIFT+Click to select a range of checkboxes:

        // this variable stores the most recently clicked checkbox
    // it is used for shift-clicks
    var lastClickedBox = 0;

    // the checkbox functionality is default to the browser
    $('.chcktbl').click(function(event) {
        var clickedBox = $('.chcktbl').index(event.target);
        if(event.shiftKey) {
            setCheckboxes(lastClickedBox, clickedBox);
        };
        lastClickedBox = clickedBox;
                    countSelected();
    });


    // sets all the checkboxes between the specified indices to true

    function setCheckboxes(end, start) {
        if(start > end) {
            var temp = start;
            start = end;
            end = temp;
        };
        for(var i = start; i < end; i++) {  
        $('.chcktbl').eq(i).prop('checked', true);
        };
                    countSelected();
    };

    </script>

これは、ワンクリックでアイテムの範囲を選択するための非常に一般的な機能ですが、それを行う効率的な方法が見つかりません. 誰かがこれにアプローチするより良い方法を知っているか、コードの非効率性を見つけることができる場合は、私に知らせてください.

4

2 に答える 2

0

コードを試してみましたが、うまくいきました。このjqueryプラグインを試してみてください

https://gist.github.com/DelvarWorld/3784055

于 2013-08-16T20:39:10.097 に答える
0

jquery nextUntilを使用するのはどうですか?

私は実際にこれをテストしませんでしたが、これで基本的な考え方が得られ、for ループが削除されます。nextUntil/prevUntil を使用する前にこれと同様の機能を作成しましたが、応答しないページが表示されることはありませんでした。

function setCheckboxes(end, start) {
    if(start > end) {
        var temp = start;
        start = end;
        end = temp;
    };

    $('.chcktbl').eq(start).nextUntil(':eq('+(end+1)+')').add().prop('checked', true);
    countSelected();
};
于 2013-08-16T20:37:10.737 に答える