使用“select-all”复选框时进行Ajax调用

Question

我正在努力找出实现对使用“select-all”时选中的每个复选框进行AJAX调用的最佳方法。

在使用以下代码检查单个复选框时，我拼凑了一起进行AJAX调用。这种方法可能很麻烦，但它运作良好：

checkboxes = document.getElementsByTagName("input");

    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = checkboxes[i];
        checkbox.onclick = function () {
            var currentRow = this.parentNode.parentNode;
            var selectedVin = currentRow.getElementsByTagName("td")[1];

            $.ajax({
                type: 'GET',
                url: '/Search?handler=ExportList&vin=' + selectedVin.textContent.trim(),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {

                    console.log(JSON.stringify(data));

                },
                error: function (ex) {
                    console.log('Error occurred during processing.' + ex);
                }
            });
        };
    };

上面的代码块调用RazorPage处理程序来存储会话中的一些数据。

我也用它来做我的全选

 $('#select-all').click(function(event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;
            });
        }
        else {
            $(':checkbox').each(function () {
                this.checked = false;
            });
        }
    });

寻找一些指导，一旦选中“select-all”，对页面上的所有复选框进行相同的AJAX调用。我已经尝试将这两种方法整合在一起，但还没有任何结果。

Answer 1

设计

一种方法是通过element.click()手动触发click事件。但由于我们需要在checked和unchecked之间做出选择，最好绑定一个onchange事件，如下所示：

someCheckbox.onchange=function(e){
    e.preventDefault();
    if(this.checked){
        onSelected(this);    //trigger event to handle `check` 
    }else{
        OnUnselected(this);  //trigger event to handling `uncheck` 
    }
}

现在我们可以通过以下方式检查一些框：

//  var checkbox is a `Element`
if(checkbox.checked){} // do nothing if already checked
checkbox.checked = true;
onSelected(checkbox);

我们也可以用类似的方式取消选中它。

履行

首先，创建函数来处理check / uncheck事件

function onSelected(selectedElement){
    var currentRow = selectedElement.parentNode.parentNode;
    var selectedVin = currentRow.getElementsByTagName("td")[1];
    console.log("seleced:",currentRow,selectedElement.name,selectedVin);
    // ... ajax call 
}

function onUnselected(unselectedElement){
    // ...
}

function onchange(e){
    e.preventDefault();
    if(this.checked) { onSelected(this); }
    else { onUnselected(this); }
}

然后为每个onchange元素注册checkbox处理程序：

for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onchange= onchange;
};

最后，注册#select-all.onchange事件处理程序如下：

document.getElementById('select-all').onchange=function(event) {
    if (this.checked) {
        $(':checkbox').each(function () {
            if(this.checked){ return; } // do nothing if already checked
            this.checked = true;
            onSelected(this);
        });
    }
    else {
        $(':checkbox').each(function() {
            if(!this.checked) { return; } // do nothing if already unchecked
            this.checked = false;
            onSelected(this);
        });
    }
};

---

作为旁注，我认为发送这么多ajax请求不是一个好主意。最好重构服务器端代码以接收像{s1:"checked",s2:"unchecked",s3:"checked","s4":"checked"}这样的已检查字符串列表。这样，浏览器只会发送一个请求。显然，它会更有效率。