如何在更改事件时获取复选框的数据元素

Question

我有一个动态项目表，每个项目旁边都有复选框。当用户选择一个复选框时，我想从表中获取“名称”项并将其添加到文本框中。看图：

我尝试实现此目的的方法是向每个复选框添加“更改”事件，并使用文本名称填充它的“数据名称”元素。

<tbody>
            @foreach (var item in Model.Items)
            {
                <tr>
                    <td><input type="checkbox" name="selectBox" data-name="@item.Name" /></td>

如您所见，我用项目名称填充数据名称，作为避免直接拉取它的方法（我不知道该怎么做）。现在在 javascript/jquery 中，我将一个事件绑定到每个复选框并尝试使用以下代码获取数据元素：

$('input[name=selectBox]').change(function (item) {
    var text = $(item).attr('data-name');
});

当代码运行时，所有复选框都会触发事件，但当我希望它是名称数据时，“文本”未定义。

寻找我的方法的答案和/或更好的方法，涉及一起跳过数据元素并直接获取名称值。感谢您的关注。

Answer 1

试试这个：

var text = $(this).data('name');

change

函数的第一个参数是

event

，而不是元素本身。此外，jQuery 会自动将函数作用域 (

this

) 设置为要更改的元素。

参见文档

Answer 2

在您的情况下

item

是事件对象而不是

DomElement

，您可以通过事件属性获取元素

currentTarget

$('input[name=selectBox]').change(function (item) {
    var text = $(item.currentTarget).attr('data-name'); 
});

或使用

this

，因为

this

在当前元素上引用`，它与前面的示例相同，但更短

$('input[name=selectBox]').change(function (item) {
    var text = $(this).attr('data-name'); 
});

Answer 3

您还将问题标记为

Javascript

，所以这里是使用 JS 的用例的答案：

event.currentTarget.attributes['data-name'].value

属性

event.currentTarget.attributes

是一个 NamedNodeMap。

对于我的模型系统，我有一个带有属性

data-identifier

的复选框，属性值 = id123 和

data-abc

属性值 123。由于它是一个 Angular 项目，这是我的

<input>

节点：

<input type="checkbox" [attr.data-identifier]="'id123'" [attr.data-data-abc]="'123'" (change)="changeHandler($event)">

...像这样

changeHandler()

public changeHandler(evt: any) }
    const NamedNodeMap = e.currentTarget.attributes;
    const identifier = namedNodeMap['data-identifier'].value; 
    // etc.......
}

...这是我的用例的 NamedNodeMap 的屏幕截图：