javascript - 在同一 div id 中获取具有不同类名的复选框值 - jquery mvc

Question

我正在尝试获取位于同一分区中但具有不同类名的复选框的值。

      <tr>
    <td colspan="4" align="center">
       
        <div id="divEntities" style="width:100%;height:150px;overflow-y:scroll;align:center;">
            <table cellspacing="2" cellpadding="2" width="95%" align="center" border="1">
             
                @{
                    var i = 0;
                    while (i < Model.CompanyMaster.Count)
                    {
                        <tr>
                            <td style="width:50%" hidden="hidden"><input type="checkbox" class="EntityCheck" id="chkCompanyId" /> @Model.CompanyMaster[i].COMPANYID</td>
                            @if ((i + 1) < Model.CompanyMaster.Count)
                            {
                                <td><input type="checkbox" class="EntityCheck" /> @Model.CompanyMaster[i + 1].COMPANY_NAME</td>
                                <td><input type="checkbox" class="CurrentYear" /> @DateTime.Now.Year </td>
                                <td><input type="checkbox" class="PreviousYear" /> @DateTime.Now.AddYears(-1).Year </td>
                                <td><input type="checkbox" class="LastYear" /> @DateTime.Now.AddYears(-2).Year </td>
                            }
                            else
                            {
                                <td></td>
                            }
                        </tr>
                        i = i + 1;
                    }
                }
            </table>
        </div>

        </td>
    </tr>

使用上面的代码，我可以在具有多个复选框的表中填充数据，但无法获取类名不是 EntityCheck 的复选框的值。下面是我的 jQuery 函数：

function GetSelectedEntities() {
var entities = "";
$("#divEntities").find('td').each(function (i, el) {

    var checkbox = $(this).find('input.EntityCheck');

    //var check1 = $(this).find('CurrentYear');
    //var check2 = $(this).find('PreviousYear');
    //var check3 = $(this).find('LastYear');

    var check1 = $('.CurrentYear').val();
    var check2 = $('.PreviousYear').val();
    var check3 = $('.LastYear').val();
           

    if (checkbox != undefined && $(checkbox).length > 0 && $(checkbox).prop('checked') == true) {
        var EntityData = jQuery.trim($(this).text());

        if (entities == "") {
            entities = EntityData;
        }
        else {
            entities = entities + "|" + EntityData;
        }
    }
});
return entities;

}

在按钮单击事件上调用 jQuery 函数：

 <button style="font:normal 9pt Arial;height:30px;width:100px;border-radius:5px; border:none; background-color:royalblue; color:white" id="btnAdd" onclick="GetSelectedEntities(event);">
                    Add
                </button>

我尝试为所有复选框提供相同的类名，但问题是我能够获取年份复选框的值，即使没有选择 CompanyName。我只有在检查CompanyName复选框并相应的年度时才需要年度值。我还尝试将 id='' 赋予年份复选框，但无法获取值。

我无法弄清楚我哪里出错了。我需要在我的 jQuery 中进行哪些更改才能获得预期的结果？

标签： javascriptjqueryasp.net-mvc

Answer 1

我必须进行更改才能获得所需的解决方案。请在下面找到解决方案：

<tr>
    <td colspan="4" align="center">
       
        <div id="divEntities" style="width:100%;height:150px;overflow-y:scroll;align:center;">
            <table cellspacing="2" cellpadding="2" width="95%" align="center" border="1">
             
                @{
                    var i = 0;
                    while (i < Model.CompanyMaster.Count)
                    {
                        <tr>
                            <td style="width:50%" hidden="hidden"><input type="checkbox" class="EntityCheck" id="chkCompanyId" /> @Model.CompanyMaster[i].COMPANYID</td>
                            @if ((i + 1) < Model.CompanyMaster.Count)
                            {
                                <td><input type="checkbox" class="EntityCheck" /> @Model.CompanyMaster[i + 1].COMPANY_NAME</td>
                                <td><input type="checkbox" class="chkYear" /> @DateTime.Now.Year </td>
                                <td><input type="checkbox" class="chkYear" /> @DateTime.Now.AddYears(-1).Year </td>
                                <td><input type="checkbox" class="chkYear" /> @DateTime.Now.AddYears(-2).Year </td>
                            }
                            else
                            {
                                <td></td>
                            }
                        </tr>
                        i = i + 1;
                    }
                }
            </table>
        </div>

        </td>
    </tr>

jQuery：

function GetSelectedEntities() {

    var entities = "";
    var CompanySelected = false;
    var counter = 0;
    $("#divEntities").find('td').each(function (i, el) {
        counter = counter + 1  

        var checkbox = $(this).find('input.EntityCheck');

        var checkboxyear = $(this).find('input.chkYear');
        if (counter == 2) {
            if (checkbox != undefined) {
                if ($(checkbox).prop('checked') == true) {
                    CompanySelected = true;
                    var EntityData = jQuery.trim($(this).text());

                    if (entities == "") {
                        entities = EntityData;
                    }
                    else {
                        entities = entities + "-" + EntityData;
                    }
                }
                else {
                    CompanySelected = false;
                }
            }
        }
        if (counter > 2) {
            if (CompanySelected == true) {

                if (checkboxyear != undefined) {
                    if ($(checkboxyear).prop('checked') == true) {
                        var EntityData = jQuery.trim($(this).text());
                        entities = entities + "|" + EntityData;
                       
                    }
                }
            }
        }
        if(counter == 5)
        {
            counter = 0;
        }
    });
    return entities;
}