Jquery - 獲取一行的所有內容

Question

我對jquery或任何網絡技術都很陌生。

這裏是我的HTML代碼：

<form id = "featureform"> 
     <!-- Table inside the form --> 
     <table id="mytable" class="table table-striped"> 
      <!-- First Row --> 
      <tr id = "tableRow1"> 
       <td><input id="from_checkbox" class="form-input-checkbox" type="checkbox" checked 
              data-toggle="toggle" data-on="From" data-off="From"></td> 
       <td><input type="text" id="from_text" value="tester@test.com"></td> 
      </tr> 

      <!-- Second Row --> 
      <tr id = "tableRow2"> 
       <td><input id="to_checkbox" class="form-input-checkbox" type="checkbox" checked 
              data-toggle="toggle" data-on="To" data-off="To"></td> 
       <td><input type="text" id="to_text" value="myself@dummy.com"></td> 
      </tr> 
     </table> 
    </form> 

所以我有一個表單內的表。表中的每一行都有2列。第一列將包含一個bootstrap toggle複選框。文本字段將保存特定複選框的值。兩種輸入類型（複選框和文本字段）都有與它們關聯的ID。

這是我想做的事：這裏需要

說明：當用戶切換複選框，我想知道的複選框和文本字段的「身份證」。

該表將有多行，因此基於ID的每行硬編碼不是解決方案。我要尋找一個通用的解決方案，看起來像這樣：

//form-input-checkbox is the class name assigned for every checkbox. So we monitor any events coming from these 
// checkboxes, and do the magic 
$(".form-input-checkbox").change(function(){ 
    // Extract the id of the checkbox 
    // Extract the id of the textfield in this row 
    console.log($(this).closest("tr")); 
}); 

Answer 1

您可以使用jQuery attr()方法獲取id屬性值。要獲得對文本字段的引用，首先使用closest()方法獲取對外部tr的引用並使用find()方法獲取輸入字段。

這應該工作。

$(".form-input-checkbox").change(function(){ 
    var _this=$(this); 

    alert(_this.attr("id")); 
    alert(_this.closest("tr").find("input[type='text']").attr("id")); 
}); 

Here是一個工作示例。

Answer 2

這應該可以做到。

$(document).ready(function() { 
     $("input:checkbox[data-toggle='toggle']").change(function() { 
      var $checkbox = $(this); 

      var checkboxId = $checkbox.attr("id"); 
      var inputId = $checkbox.parent().next("td").find("input:text").attr("id"); 

      console.log(checkboxId); 
      console.log(inputId); 
     }); 
    }); 

Answer 3

你的代碼應該是這樣的：

$(".form-input-checkbox").change(function(){ 
    // Extract the id of the checkbox 
    console.log($(this).attr("id")); 
     // Extract the id of the textfield in this row 
    console.log($(this).closest("tr").find("input[type='text']").attr("id")); 

}); 

這個working plnkr