Question

我有一个表，用户可以通过复选框选择某些行。我有一些javascript让他们选中每个复选框并选择全部。我也写了一些javascript来让用户选中一个方框，然后按住Shift键点击另一个复选框，两者之间的所有方框都应该被选中。

所有这一切工作唯一的问题是第一个复选框未被识别。因此，当用户保持shift并选择另一个复选框时，仅选中该复选框。但是如果用户保持shift并选择第三个复选框，那么第二个和第三个之间的所有框都会被检查。

的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并选择另一个框。

我是网页设计的新手，不知道如何诊断这个问题（事件处理？）。我将不胜感激任何帮助或指导。

Answer 1

你在$('input[type=checkbox]')函数内绑定$(this).click(function () {因此它第一次没有工作

您绑定$(document).ready(function () {

中的事件

根据我的理解删除$(this).click(function () {

Fiddle Demo

Answer 2

您可以在handleChecked内安装$(this).click(function () {侦听器。这意味着：

在用户单击一次之前，不会安装事件处理程序。
将安装事件处理程序的多个副本。

我想你只想在$(document).ready(function () {内设置一次事件处理程序。

所以，只需删除行

$(this).click(function () {

和

}); //$(this).click(function())

javascript没有看到第一次点击？

2 个答案: