在同一 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 中进行哪些更改？

Answer 1

这样的事情会起作用：

$('#btnAdd').on('click', function(){
    var checked = $('table').find('input:checked');
    checked.each(function(){
        alert($(this).closest('td').text());
        //do your stuff here..
    });
});

Se 工作小提琴：https://jsfiddle.net/c8n4rLjy/

Answer 2

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

<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;
}