Question

我正在努力找出实现使用“全选”时选中的每个复选框进行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;
            });
        }
    });

寻找一些指导，以便在选中“全选”后对页面上的所有复选框进行相同的AJAX调用。我已经做了一些尝试将这两种方法整合在一起，但是还没有什么。

Answer 1

设计

一种方法是通过element.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"}。这样，浏览器将仅发送一个请求。显然，它将更加高效。

使用“全选”复选框时进行Ajax调用

1 个答案: