Question

选中复选框后，我需要从td读取隐藏值。这需要作为参数传递给另一个函数。

我的表 -

   <tbody>
 @for (int i = 0; i < Model.Count; i++)
{
<tr>
    <td> 
        @{var val = counter++;}      
        @Html.CheckBoxFor(modelItem => modelItem[i].ShouldImport, new { @class = "sid", @onclick = "DisplayDetailedInfo(this)" })  
        <input id="hiddendata" type="hidden" value=@val name="tablerow" /> 
    </td>
    <td>
        @Html.DisplayFor(modelItem => modelItem[i].Name)
        @Html.HiddenFor(modelItem => modelItem[i].Name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => modelItem[i].AccountNumber)
        @Html.HiddenFor(modelItem => modelItem[i].AccountNumber)
    </td>
    <td>
        @Html.DisplayFor(modelItem => modelItem[i].AccountType)
        @Html.HiddenFor(modelItem => modelItem[i].AccountType)
    </td>
    <td>
        @Html.DisplayFor(modelItem => modelItem[i].AccountStatus)
        @Html.HiddenFor(modelItem => modelItem[i].AccountStatus)
    </td>
    <td>
        @Html.CheckBoxFor(modelItem => modelItem[i].IsLatePayment)
    </td>           
</tr>
}

我的Jquery功能如下 -

    function DisplayDetailedInfo(data) {         
        var checkboxChecked = $(data).is(':checked');        
        if (checkboxChecked)
        {      
            var hiddenval = $(data).find('#hiddendata').val();                       
            console.log(hiddenval);
         }           
    }

我的Jquery输出未定义。请纠正我正在做的错误。

Answer 1

首先，您创建了无效的html，因为您有多个带id="hiddendata的元素，但实际上并不需要隐藏的输入。而是将值存储在表格单元格data属性

中

@{ var val = counter++; }     
<td data-val="@val">
  @Html.CheckBoxFor(m => m[i].ShouldImport, new { @class = "sid" })
</td>

接下来，您应该使用unobtrusive javascript而不是用行为污染标记

$('.sid').click(function() {
  if($(this).is(':checked'))
  {
    var val = $(this).closest('td').data('val');
    console.log(val);
  }
});

当前代码不起作用的原因是$(data).find(..)正在尝试查找复选框的子元素（不存在）。但以下内容可以var hiddenval = $(data).closest('td').find('#hiddendata').val();

附注：似乎val的值与i（for循环中）相同，因此它可能只是<td data-val="@i">

如何从td

1 个答案: