0

我有一个表格，用户可以通过复选框选择某些行。我有一些 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 并选择另一个框。

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

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. 在用户单击一次之前，不会安装事件处理程序。
  2. 将安装事件处理程序的多个副本。

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

所以，只需删除这些行

$(this).click(function () {

和

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