如何在更改事件時獲取複選框的數據元素

我已經獲得了每個項目旁邊帶有複選框的項目的動態表格。當用戶選擇複選框時，我想從表格中獲取「名稱」項並將其添加到文本框中。見圖片：如何在更改事件時獲取複選框的數據元素

我試圖做到這一點是通過添加一個「變」事件的每一個複選框，並填充它的「數據名稱」與文本的名稱元素的方式。

<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

如何在更改事件時獲取複選框的數據元素

回答

相關問題