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

Posted 2023-05-08

【中文标题】在同一 div id 中获取具有不同类名的复选框值 - jquery mvc

【英文标题】：Get checkbox values with different class name in the same div id - jquery mvc

【发布时间】：2021-10-29 20:15:00

【问题描述】：

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

      <tr>
    <td colspan="4" align="center">
       
        <div id="divEntities" style="width:100%;height:150px;overflow-y:scroll;align:center;">
            <table cellspacing="2" cellpadding="2"  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 中进行哪些更改？

【参考方案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/

【参考方案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"  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;