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

我已经获得了每个项目旁边带有复选框的项目的动态表格。当用户选择复选框时，我想从表格中获取“名称”项并将其添加到文本框中。见图片：如何在更改事件时获取复选框的数据元素

我试图做到这一点是通过添加一个“变”事件的每一个复选框，并填充它的“数据名称”与文本的名称元素的方式。

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

当代码运行事件是射击所有复选框，但当我期望它是名称数据时，“文本”是未定义的。

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

来源

2015-11-05 BrianLegg

只要你不整视图模型转储到客户端（如在单页的应用程序），将任意数据从一些元素模型相关联的常见的方式是确实是' data- *'属性。 – haim770

试试这个：

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

change函数的第一个参数是event，而不是元素本身。此外，jQuery自动将函数范围（this）设置为正在更改的元素。

见Documentation

来源

2015-11-05 15:44:28 haim770

哦，男人.... $（this）而不是$（item）。多么简单。谢谢，这就像一个魅力。如果有人知道如何在不使用数据元素的情况下做到这一点，我也会很乐意看到这一点。谢谢 - 当SO让我时，我会在10分钟内接受这个答案 – BrianLegg

在你的情况item是事件对象不DomElement，你可以通过事件属性获取元素currentTarget

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

或使用this因为this refer`上当前元素，这是一样的前一个例子但更短

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

来源

2015-11-05 15:44:07

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

回答

相关问题