Question

我在视图中有两个复选框的行列表。当我提交按钮时，我想用jquery获取MVC中该特定行的值。在视图中我有以下内容：

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Emp_Id)
                        @*@Html.Hidden("EID", @item.Emp_Id)*@

                    </td>
                    <td>@Html.DisplayFor(modelItem => item.LevID) </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EmpDept)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Notes) @Html.Hidden("LveID", @item.LevID)
                    </td>
                    <td>
                        <input type="checkbox" id="ChkApproveLve" name="ChkApproveLve" /><label for="ChkApproveLve">Approve</label>
                        <input type="checkbox" id="ChkRejectLve" name="ChkRejectLve" /><label for="ChkRejectLve">Reject</label>
                        <input type="hidden" id="hidLeaveId" value=@item.ID />
                    </td>
                </tr>
                <tr>
                    <td colspan="3"></td>
                </tr>
            }

        </table>
<div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <center>
                <input type="button" name="UpdateLeave" id="BtnUpdateLeave" value="UPDATE" />
            </center>
        </div>
    </div>

使用Jquery我尝试通过以下方式获取复选框检查行的值：

$(document).ready(function(){
        $("#BtnUpdateLeave").click(function () {
            var approve; var reject; var EmpID;
            approve = $("input[name='ChkApproveLve']:checked").length ? "1" : "0";
            reject = $("input[name='ChkRejectLve']:checked").length ? "1" : "0";
            //EmpID = $("#EID").val();
            var LvId = $("#LevID").val();
            //var LvId = $(this).closest('td').find('#LevID').val();
            alert(LvId);
            var szData = $("#frm_UpdateLeave").serialize() + "&Approve=" + approve + "&Reject=" + reject + "&LveID=" + LvId + "&EID=" +  EmpID;
           $.ajax({
                type: "POST",
                url: "/Infrastructure/Handler/UpdateLeaveApplication.ashx",
                data: szData,
                success: function (response) {

                    alert('Updated Successfully');
                    location.reload();
                },
                error: function () {
                }
            });

        });
    });

当我选中特定行的批准/拒绝复选框时，我想从该行获取数据。任何人都可以帮我完成这个

提前致谢..

Answer 1

因此，要获取change checkbox状态的记录，您可以执行以下操作：

<强> DEMO HERE

为每个复选框指定一个类名，例如：leavestatus，您可以按如下方式更改其状态：

$(".leavestatus").on('change',function(){
//if($(this).is(":checked")){  //Include if you only want to get details on check and on uncheck do nothing
    var parent= $(this).parent().closest('tr');
    var record="";
    record={'Emp id':  parent.find('td:nth-child(1)').text().trim(),
            'LevID':  parent.find('td:nth-child(2)').text().trim(),
            'EmpName':  parent.find('td:nth-child(3)').text().trim(),
            'Department':  parent.find('td:nth-child(4)').text().trim(),
            'Notes':  parent.find('td:nth-child(5)').text().trim()};
    console.log(record); //check the console for what has been fetched.
    //}
});

<强>更新

DEMO

var data=[]; //declare a global variable
$(".leavestatus").on('change',function(){
    var parent= $(this).parent().closest('tr');
    if($(this).is(":checked")){
    var record="";
    record={'Emp id':  parent.find('td:nth-child(1)').text().trim(),
            'LevID':  parent.find('td:nth-child(2)').text().trim(),
            'EmpName':  parent.find('td:nth-child(3)').text().trim(),
            'Department':  parent.find('td:nth-child(4)').text().trim(),
            'Notes':  parent.find('td:nth-child(5)').text().trim()};
        data.push(record); //store in a global array
        console.log(data);

    }
    else
    {
         var recordToPopId=parent.find('td:nth-child(2)').text().trim();
         data = data.filter(function( obj ) {
               return obj.LevID !== recordToPopId;
         });//remove from global array on uncheck
         console.log(data);
    }
});

Answer 2

你可以写这个

approve = $("input[name='ChkApproveLve']").is(':checked');
reject = $("input[name='ChkRejectLve']").is(':checked');

通过View MVC - Jquery中的复选框选择获取所选行的ID

2 个答案: