为什么在单一复选框检查后我的所有行都会调用我的javascript函数?

时间:2014-12-19 14:33:30

标签: javascript jquery html asp.net-mvc-3 checkbox

在我的MVC 3 Applcation中,每次检查具有特定空列单元格的行的复选框时,我都想调用我的上传函数(createUploader())。 但是,createUploader()会应用于此单元格为空的每一行。

我视图中的Html复选框代码:

    <td><input type="checkbox" name="selectecals" value="@Model.ElementAt(index).Id"/></td>

每个表行中的单元格具有值(CertName)或为空,并且分配了用于在javascript中标识的类。

  @if (Model.ElementAt(index).CertName != null)
             {
                 <td>@Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
             }
             else
             {                    
                <td class="file-uploader-attachment-Class"></td>
             }

到目前为止我的javascript:

    <script type="text/javascript">
$(document).ready(function () {

    function handleCheckbox() {

            if ($(this).find(':checkbox').is(':checked')) {
                createUploader();
                $(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
            }
            else {
                $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
                $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
            }
    }

    $('tr').each(handleCheckbox);
    $('tr').on('click', handleCheckbox);

    function createUploader() {

        var elements = document.getElementsByClassName('file-uploader-attachment-Class');

        Array.prototype.filter.call(elements, function (element) {

            var uploader = new qq.FileUploader({
                element: element,
                sizeLimit: 2147483647, // max size
                action: '/CalibrationViewer/AttachmentUpload',
                allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
                params: {
                    customer: CUST_NAME,
                    calibrationId: CAL_ID
                },
                multiple: false,
                debug: false,

                onComplete: function (id, fileName, responseJson) {
                    var resultMessage = document.getElementById('resultMessage');
                    alert(responseJson.msg);
                }

            });

        });
    }
});

到目前为止,当加载页面时,如果没有Cert单元格的值,则显示“No file”。 如果用户选中此行的复选框,则每次使用“无文件”都会使用createUploader()函数。

理想情况下,我希望在选中该特定行的复选框时调用此函数(显示上传btn),这有意义吗?

before check After check

1 个答案:

答案 0 :(得分:1)

您需要指定应用函数createUploader()

的位置
function handleCheckbox() {

            if ($(this).find(':checkbox').is(':checked')) {
                createUploader($(this));
                $(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
            }
            else {
                $(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
                $(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
            }
    }

 function createUploader(container) {

    var elements = container.find('.file-uploader-attachment-Class');

    Array.prototype.filter.call(elements, function (element) {

        var uploader = new qq.FileUploader({
            element: element,
            sizeLimit: 2147483647, // max size
            action: '/CalibrationViewer/AttachmentUpload',
            allowedExtensions: ['xls', 'xlsx', 'pdf', 'doc', 'docx', 'csv', 'txt', 'rtf', 'zip', 'zipx', '7z'],
            params: {
                customer: CUST_NAME,
                calibrationId: CAL_ID
            },
            multiple: false,
            debug: false,

            onComplete: function (id, fileName, responseJson) {
                var resultMessage = document.getElementById('resultMessage');
                alert(responseJson.msg);
            }

        });

    });
}