0

ユーザーがチェックボックスで特定の行を選択できるテーブルがあります。各チェックボックスを選択してすべて選択できるようにするJavaScriptがあります。また、ユーザーがボックスをチェックしてからShiftキーを押しながら別のチェックボックスをクリックすると、その間のすべてのボックスがチェックされるようにするJavaScriptが書かれています。

これはすべて機能していますが、唯一の問題は、最初のチェックボックスが認識されていないことです。したがって、ユーザーがシフトを押しながら別のチェックボックスを選択すると、そのチェックボックスのみがチェックされます。ただし、ユーザーがシフトを押したまま 3 番目のチェックボックスを選択すると、2 番目と 3 番目の間のすべてのボックスがチェックされます。

Javascript

$(document).ready(function () {
    $(this).click(function () {
        //shift-click checkboxes 
        var lastChecked = null;
        var handleChecked = function (e) {
            //alert(lastChecked);
            if (lastChecked && e.shiftKey) {
                var i = $('input[type="checkbox"]').index(lastChecked);
                var j = $('input[type="checkbox"]').index(e.target);

                var checkboxes = [];
                if (j > i) {
                    checkboxes = $('input[type="checkbox"]:gt(' + (i - 1) + '):lt(' + (j - i) + ')');
                } else {
                    checkboxes = $('input[type="checkbox"]:gt(' + j + '):lt(' + (i - j) + ')');
                }

                if (!$(e.target).is(':checked')) {
                    $(checkboxes).removeAttr('checked');
                } else {
                    $(checkboxes).attr('checked', 'checked');
                }
            }
            lastChecked = e.target;
        } //handleChecked
        $('input[type=checkbox]').click(handleChecked);
    }); //$(this).click(function())

    //select all checkboxes
    $('#selectall').click(function (i, v) {
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function (i, v) {
        $('#selectall').prop('checked', $('.selectedId:checked').length == checkCount)
    });
}); //ready function

問題を再現するフィドルを作成しました。

http://jsfiddle.net/tihg7947/JXnNK/

問題を再現するには、ボックス ([すべて選択] 以外) をオンにしてから、Shift キーを押しながら別のボックスを選択します。

私は Web デザインが初めてで、この問題を診断する方法がわかりません (イベント処理?)。ヘルプやガイダンスをいただければ幸いです。

4

2 に答える 2

3

$('input[type=checkbox]')関数内でバインドして$(this).click(function () {いるため、初めて機能しません

内部でイベントをバインドします$(document).ready(function () {

私の理解が取り除かれると$(this).click(function () {

フィドルのデモ

于 2013-10-22T15:06:45.220 に答える
2

handleChecked内からリスナーをインストールします$(this).click(function () {。この意味は：

  1. イベント ハンドラーは、ユーザーが 1 回クリックするまでインストールされません。
  2. イベント ハンドラーの複数のコピーがインストールされます。

内で一度イベントハンドラを設定したいだけだと思います$(document).ready(function () {。

したがって、行を削除するだけです

$(this).click(function () {

と

}); //$(this).click(function())
于 2013-10-22T15:05:06.440 に答える